How to get a div height variable depending on content

SouthendSupporter · March 26th, 2010, 07:17 AM

This is a problem I had before and THOUGHT I'd fixed. Obviously not :(

I have a web page consisting of a banner header, a left column, a right column with an image as background and a bottom banner.
The height of the page could vary depending on what is entered into the columns.

I want the height of the pagebody div to be as high as necessary to create a white background behind the left and main columns and to force the bottom banner beneath them.

Is there a height command I can use to achieve this. I have tried min-height, inherit and auto with no success. If I know the height of the page I can set min-height and this works OK. But I'd like it to 'grow' if more text is entered into the main column

My code looks like this (I have put the styles into the div statements - I know I can use css but this helped me to 'see it all'):

Code:

 <form id="form1" style="text-align: center; margin: 0px 0px 0px 0px; background-color: #EEEEEE" runat="server">

  <div id="pagecontainer"  style="margin: auto;  background-color:#ffffff; width: 978px;">
      <div id="topbanner" style="display:block; height:173px; width: 978px;margin: auto; background-image: url('Images/TopLogo.gif');">
      </div>     
        <div id="pagebody" style="display:block; margin: 0px auto 0px auto; min-height: 650px; width: 978px; background-color: #FFFFFF; height: inherit;">
         <div id="leftsidebar" style="display: block; width: 220px; float:left; Margin:auto 0px 0px 0px; padding: 0px 5px 0px 5px; ">
          <div id = "contact" style="background-color:#e0e0e0; border-color:#000000; border-width:1px">
          <img alt="Leonine Offices" src="Images/080508-Leonine-Offices-200w.jpg"  />
            <h1>Contact Information
            </h1>
            <p><b>Leonine Properties Ltd</b></p>
            <p>Cobblestone Court<br />
            Upper Easebourne<br />
            Midhurst<br />
            West Sussex<br />
            GU29 0BQ</p>
            <p>Tel: 01730 815757<br />
            Fax: 01730 814334<br />
            Mob: 07831 788700</p>
            <a href="mailto:bgowar@leonine.co.uk" >e-Mail Us</a>
          </div>
        </div>
        <div id="maincontent" style="display: block; float: left; padding:0px 20px 0px 20px; 
                                   width: 705px; 
                                   background-position: center center;  background-image: url('Images/Two Lions1.jpg'); 
                                   background-repeat: no-repeat;">
          
          <h2 style="color:#000000; text-align: justify;">
            Leonine Properties' Website will be appearing here shortly</h2>
          <h3 style="color:#000000; text-align: justify;">
            In the meantime , here are a selection of photographs from some of our projects.</h3>
          
A load of text and image stuff goes in here and causes this dive to grow
          
        </div>
        </div>
      
      <div id="Bottombanner" 
        style="background-position: top; height: 25px; width: 978px; margin:0px auto; background-image: url('Images/BottomBanner.jpg'); 
        background-repeat: no-repeat;">
       
        <p style="font-size:smaller; color:#d0d0d0"><br /><br />Website design and maintenance by <a style="font-size:smaller; color:#d0d0d0" target="_blank" href="http://www.beaufortnetworks.com">Beaufort Networks Ltd</a></p>

       </div>    
    </div>   
  </form>