Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 3.5 > ASP.NET 3.5 Basics
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old March 26th, 2010, 07:17 AM
Authorized User
Join Date: Jul 2009
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

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 09: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 05:58 AM
Change height of div element if < window height JoelJunstrom Javascript How-To 1 October 10th, 2003 09:14 AM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.