Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 249
  • Last Modified:

height not auto expanding

I have this page http://www.lovepotionsbysusan.com/faq.html and as you can see the bottom is a mess. How can I have this div autostretch as far as height so it looks cleaner?
Thanks
Lisa
0
LisaWilcox
Asked:
LisaWilcox
  • 2
1 Solution
 
RoonaanCommented:
Change:
#maincontent {

      margin-left: 204px;

      position: absolute;

      left: 84px;

      top: 230px;

      width: 569px;

      min-height: 650px;

      height: 5px;

}
to

#maincontent {

      margin-left: 204px;

      position: absolute;

      left: 84px;

      top: 230px;

      width: 569px;

        height: auto !important;

      min-height: 650px;

      height: 5px;

}

-r-
0
 
LisaWilcoxAuthor Commented:
I just tried your suggestion and it is still doing the same in Firefox and IE.
0
 
geordie007Commented:

you've positioned the maincontent div absolutely. what this does is take that div out of the flow of the page completely, almost as though the div is sitting on top of the browser rather than being part of the page. obviously, because that div is no longer part of the page, the content div has nothing to 'stretch over'. that's why if you remove the maincontent div altogether, the rest of the page is fine.

what you'll need to do is create a two column layout, using floats. your left hand nav will be of fixed width, and floated left. your main content div will also be floated left, and fixed width. floats also take the divs out of the normal flow of the page, but there is a handy little fix. after these two floated elements, place a div that clears these elements. it has this style:

<div style="width: 1px; height 1px; clear: both"></div>

this says to the rest of the page, "although you can't see those two floated elements, you can see me, so stretch this far".

i'll see if i can have a quick play with your code to get to show you what i mean.
0
 
geordie007Commented:


ok, if you just copy this into a new doc, you'll hopefully see what i mean. i've had to put your stylesheet into the page, get rid of the dreamweaver stuff, etc, so that i could edit everything. the only problem i can see with your design is the fact that you really need a fixed with page when using floats (you can get 'round it, but you'll have to start from scratch, rather than just making a few small tweaks like this).


######################

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<base href="http://www.lovepotionsbysusan.com" />

<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
   <style>
   body {
      font-size: 14px;
      font-family: Georgia, "Times New Roman", Times, serif;
      color:#000000;
      padding:0px;
      margin:0px;
      background-color: #EEE0E5;
      background-image: url(images/rrval-BGflmhrtpale.gif);
}
.lovepotby {
      font: 24px "monotype Corsiva";
}
hr {
      color: #CC4E5C;
}


a {color: #000000;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}

h1 {
      font-size: 12px;
      text-transform:capitalize;
      background-color: #CD6889;
      border-top:2px solid #CC4E5C;
      border-bottom:2px solid #CC4E5C;
      padding:5px 15px;
      margin:0px;
      color: #000000;
}

h2 {
      font-size:12px;
      font-weight: normal;
      padding: 5px 10px;
      margin:0px;
      color: #666666;
}

img.download {vertical-align:middle;}

#container {
      
      margin-left: auto;
      margin-right: auto;
      background-color: #EEA9B8;
      border: 2px solid #CC4E5C;
      width: 780px;
}

#banner {
background-color: #EEA9B8;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;}

#content {
      background-color: #ffffff;
      padding: 0px;
      margin-right: 0px;
      border: 1px solid #CC4E5C;
      width: 780px;
      
}
#maincontent {
      width: 569px;
      margin-left: 30px;
      float: left;
}

.navcontainer {
      width: 180px;
      color: #000000;
      float: left;
}

.navcontainer ul
{
      margin-left: 0;
      padding-left: 0;
      list-style-type: none;
      font-family: Georgia, "Times New Roman", Times, serif;
      text-align: left;
      color: #000000;
      font-weight: bold;
}

.navcontainer a
{
      display: block;
      padding: 3px;
      width: 140px;
      background-color: #FFFFFF;
      border-bottom: 1px solid #eee;
      background-image: url(images/lpibutton.gif);
      color: #000000;
      background-repeat: no-repeat;
      height: 23px;
}

.navcontainer a:link, .navlist a:visited
{
      color: #000000;
      text-decoration: none;
      margin-left: 15px;
      padding-left: 40px;
}

.navcontainer a:hover
{
background-color: #FFFFFF;
color: #FF0000;
}
div#content {
height:expression(this.scrollHeight > auto ? "auto":);
}

p, pre{
      padding: 5px 10px;
      margin:0px;
      text-transform: none;
}
.highlight {
      text-transform: uppercase;
}
.contact {
      font-size: 10px;
      font-weight: bold;
}


#footer {
      clear: both;
      margin: 0px;
      padding: 0px;
      text-align: right;
      color: #000000;
}

.clear { clear: both; width: 1px; height: 1px; }
</style>
<title>Love Potions by Susan :: Romantic Needs &amp; Novelties presented in your Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="container">
  <div id="banner">
    <h1 align="right" class="highlight">One Stop Place for all of your pleasures </h1>

  </div>
  <div id="content">
    <h2><img src="images/logo.gif" alt="Love Potions, Inc. logo" width="82" height="149" hspace="10" vspace="5" style="float:left"/> </h2>
    <p align="center" class="lovepotby"><strong>Welcome to Love Potions by Susan</strong></p>
    <p align="center"> <span class="highlight"><strong>Fun, Excitement, Romance, Love &amp; Class</strong></span></p>

    <p align="center">That's what Love Potions is all about!<br />

      Love Potions offers Romantic Items and Novelties presented<br />
      in a home party atmosphere.<br />
      Parties are available for Women Only, Couples and Co-ed.<br />
      We specialize in memorable Bachlorette Parties.</p>
    <hr align="center" width="90%" />

   <div class="navcontainer">
<ul class="navlist">

      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="partyinfo.html" title="Party Info">Party Info</a></li>
      <li><a href="benefits.html" title="Benefits">Benefits</a></li>
      <li><a href="party_specials.html" title="Party Specials">Party Specials</a></li>
      <li><a href="booking_info.html" title="Booking Info">Booking Info</a></li>

      <li><a href="careers.html" title="Careers">Careers</a></li>

      <li><a href="faq.html" title="FAQ">FAQ</a></li>
      <li><a href="about_me.html" title="About me">About me</a></li>
      <li><a href="mailing_list.html" title="Mailing List">Mailing List</a></li>
      <li><a href="links.html" title="Links">Links</a></li>
      <li><a href="contact_us.html" title="Contact Us">Contact Us</a></li>

      <li><a href="http://www.merchantsstore.com/Merchant2/merchant.mv?Screen=SFNT&Store_Code=Love+Potions" title="Go Shopping">Go Shopping</a></li>

      <li><a href="http://www.lovepotionsinc.com" title="Love Potions, Inc.">Love Potions, Inc.</a></li>
</ul></div>
   

   <div id="maincontent">
     <p align="center" style="text-align:center"><span class="lovepotby" style="color: #FF0000">Frequently
       Asked Questions</span><br />

      <o:p> </o:p>
     </p>
     <p><span style="font-weight: bold">Q.&nbsp; Is there a cost for hosting a party?<br />

       A.</span> <font face="Monotype Corsiva" color="#FF0000" size="3"><span style="mso-spacerun: yes">&nbsp;</span></font> <i>There is no cost to host a party.<span style="mso-spacerun: yes">&nbsp; </span>However, we do recommend that you supply snacks and beverages for your
         guests.</i>

  <o:p> </o:p>
     </p>
     <p><span style="font-weight: bold">Q.&nbsp; What do I
       get for hosting a party?<br />

       A.</span>&nbsp; <i>You will get
         one item at half price from our regular
         product line just for hosting the party.<span style="mso-spacerun: yes">&nbsp; </span>You
         will also receive bonuses (which include 10% credit, gifts, and more) based upon how well your
         party does.<span style="mso-spacerun: yes">&nbsp;</span>For example, if your
         party grosses $351.00 - $600.00&nbsp; you will also get 10% of sales before
         tax/shipping as your own private shopping spree.</i>

  <o:p>
  &nbsp;</p>
     <p><span style="font-weight: bold">Q.&nbsp; Are there any
       age restrictions for attending/hosting a party?<br />

       A.&nbsp;</span> <i>Due to the content of the party, all hosts and guests must be at least
         21 years old.<span style="mso-spacerun:
yes">&nbsp;&nbsp;</span></i></p>
     <p><span style="font-weight: bold">Q:&nbsp; Can I have a
       themed party?<br />

       A:</span>&nbsp;<i> In most cases we can work with
         whatever you have in mind. Love Potions parties are absolutely
         perfect for bachelorette parties, starting off a new couple, birthdays,
         divorces/break-ups or just a night out with the girls.</i></p>
     <p><span style="font-weight: bold">Q.&nbsp; How far in
       advance should I book a party?<br />

       A.&nbsp;</span> <i>You can book a party as far in advance as you would like, however we
         recommend you pick a date at least 2-3 weeks prior to your party. 2-3 weeks will
         allow you enough time to send out your invitations and receive feedback from
         your guests.<span style="mso-spacerun: yes">&nbsp; </span>Just a reminder, most
         people DO NOT RSVP, so it is your job to make contact with them to obtain an
         accurate head count. We will need an accurate head count in order to make sure
         we bring enough samples, products, and giveaways.</i><b><font face="Monotype Corsiva" color="#FF0000" size="4">

           <o:p>
  &nbsp; </font></b></p>
     <p><span style="font-weight: bold">Q.&nbsp; How do I book
       a party?<br />

       A.&nbsp; </span><i>Booking a party is simple.<span style="mso-spacerun: yes">&nbsp; </span>Contact
         us by either completing the <a href="booking_info.html">online booking form</a>, <a href="mailto:romance@lovepotionsbysusan.com">email</a>,
         or phone</i>. </p>

     <p><span style="font-weight: bold">Q.&nbsp; How long
       do the parties last?<br />

       A</span>.<b>&nbsp;</b> <i>The
         length of a party depends on the number of guests, the amount of time it takes
         everyone to get settled in, and the amount of time it takes to take and fill
         orders. On average, an entire party lasts about 3-4 hours. The actual product
         presentation and informative session is about 1<sup>1/2</sup> hours. </i>
  <o:p> </o:p>

     </p>
     <p><a href="faq2.html">continued&gt;&gt;</a></p>

    </div>
 
  <div class="clear"></div>
 
   <p>
     <noscript>
      </noscript>
     <noscript>
      </noscript>

     
     <noscript>
      </noscript>
   </p>

   
    <noscript>
    </noscript>
   <noscript><div style="font-size=10px;">
      <p align="center"><i>Send mail to <a href="mailto:romance@lovepotionsbysusan.com">romance@lovepotionsbysusan.com</a> with
        questions or comments about this web site.</i></p>
      </div>
    </noscript>
  </div>
  <div id="footer">
    <h1>Love Potions by Susan  | (630) 309-4131 | <a href="mailto:romance@lovepotionsbysusan.com">romance@lovepotionsbysusan.com</a></h1>

      

  </div>
</div>

<div align="center">Page Design by <a href="http://www.webgirlwebdesigns.com">Web Girl Web Designs </a>
</div>
</body></html>
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now