Expanding Vertical Div

GeForce · 28 Nov 2007 at 17:28

I have four divs for a layout, looking like this:

Code:

#header {
 color: #333;
 width: 910px;
 float: left;
 padding: 5px;
 border: 1px solid #ccc;
 height: 75px;
 margin: 10px 0px 5px 0px;
 background: #BD9C8C;
}
#menu { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 padding-left: 30px;
 height: 450px;
 width: 150px;
 float: left;
}
#content { 
 float: right;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 padding-left: 20px;
 height: 450px;
 width: 690px;
 display: inline;
 overflow:auto;
}
#footer { 
 width: 910px;
 height: 20px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 0px 0px;
 padding-right: 5px; 
 padding-left: 5px; 
 text-align:right;
}

Now, at the moment, the menu and content divs are the same height no matter what content is shown. They are fixed, as you can see, at 450px. When content overruns this, a scrollbar is created and the div stays the same height.

What I would like, is for when the content is longer than 450px, then the "content" and "menu" divs will expand vertically (ie. increase in height) to accommodate this.

However, I would also like the div to have a minimum value of 450px. Ie, the div cannot be "shorter" than 450px.

How would I go about doing this?

TIA,
Jon

SiriusB · 28 Nov 2007 at 17:40

min-height: 450px;

allllec · 28 Nov 2007 at 17:53

also need to add in a IE6 hack iirc

GeForce · 28 Nov 2007 at 18:05

Thanks

The problem now is that if the content in the "content" div is longer than 450px, it expands, which is fine. However, the "menu" div stays at 450px.

How can I make it also expand to the height of the "content" div?

Thanks again, and apologies for CSS ignorance!

Jon

allllec · 28 Nov 2007 at 19:16

Im no CSS expert.

But display property should do what your looking for so you'll code it something like

Code:

<div id="all">
<div id="row1">

your Main and Nav go here

</div>
</div>

then css would look something like

Code:

  #all {
    display: table;
    }

  #row1  {
    display: table-row;
    }

  #main, #nav {
    display: table-cell;
    }

not 100% sure that'll work but in theory the div's main and nav will act like a table i.e. expand as other div's do etc

sorry im not a CSS boff

Tripnologist · 28 Nov 2007 at 19:17

You don't. You use faux columns to give the appearance that it does.