Both columns same height as deepest column?

Question

If I have a div layout like this:

<div id="stretchyheader"></div>
<div id="fixedwidthwide"><div>
<div id="fixednarrow></div>
<div id="footer"></div>

Which makes something like this:

-----------------------------------------------------
|          stretchyheader                           |
-----------------------------------------------------
      |                     |              | 
      |                     |              | 
      |    fixedwidthwide   |  fixednarrow |
      |                     |              | 
      |                     |              | 
      |                     | --------------
      |                     |             
      |                     |             
      |                     |       patterned          
      |                     |       background
      -----------------------
                    -  footer  -

How do I ensure that both columns are the same height as the deepest column? The column heights are flexible according to the amount of content and have a white background.

Answer 1

A very simple, common way to do this is using Faux Columns.

You would have a structure that looked something like this:

<div id="stretchyheader"></div>
<div id="container">
    <div id="fixedwidthwide"></div>
    <div id="fixednarrow></div>
</div>
<div id="footer"></div>

And you actually apply a background image to #container to add any background colors, borders, etc. to each of the 2 columns.

There are CSS techniques to do this without faking it, but they are much more complex:

• http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
• http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
• http://www.socialgeek.be/blog/read/flexible-equal-height-columns

Answer 2

Adapted from here:

Create a container around the two fixed columns, and have css something like this:

#container {
    float:left;
    width:[sum of the two columns width];
}
#fixedwidthwide {
    float:left;
    width:[whatever];
}
#fixednarrow {
    float:left;
    width:[whatever];
}

Note that this is only necessary if the columns need to be of equal height for some reason. If not, you can just follow philfreo's suggestion and use faux columns.