Solved

height not auto expanding

Posted on 2006-07-04
4
246 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

739 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