Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Basics
Password Reminder
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
ASP.NET 3.5 Basics If you are new to ASP or ASP.NET programming with version 3.5, this is the forum to begin asking questions. Please also see the Visual Web Developer 2008 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 3.5 Basics section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Thread Tools Display Modes
  #1 (permalink)  
Old March 26th, 2010, 07:17 AM
Authorized User
Join Date: Jul 2009
Location: Haslemere, Surrey, England
Posts: 61
Thanks: 15
Thanked 1 Time in 1 Post
Default How to get a div height variable depending on content

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'):
 <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 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
            <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 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 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>

Geoff Baldwin

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS 100% Height DIV Problem kwilliams CSS Cascading Style Sheets 2 August 22nd, 2007 09:55 PM
div within a div and inherting the height brettdavis4 CSS Cascading Style Sheets 1 January 23rd, 2007 08:59 AM
changing content depending on combo box value bewise PHP How-To 1 September 13th, 2006 11:57 AM
Choosing content depending on content of other ele dsekar_nat XSLT 1 February 27th, 2006 04:58 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 09:14 AM

All times are GMT -4. The time now is 02:55 AM.

Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.