Solved

height not auto expanding

Posted on 2006-07-04
4
242 Views
Last Modified: 2012-06-27
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
Comment
Question by:LisaWilcox
  • 2
4 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 17037252
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
 
LVL 1

Author Comment

by:LisaWilcox
ID: 17037384
I just tried your suggestion and it is still doing the same in Firefox and IE.
0
 
LVL 7

Expert Comment

by:geordie007
ID: 17037710

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
 
LVL 7

Accepted Solution

by:
geordie007 earned 500 total points
ID: 17037757


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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now