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