Solved

height not auto expanding

Posted on 2006-07-04
4
241 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

758 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

18 Experts available now in Live!

Get 1:1 Help Now