2 Column CSS Floated Layout

Pulling my hair out with this simple CSS layout. I have a 2-column fixed layout with a header a开发者_开发技巧nd a footer all contained in a wrapper. I need the "left" background area in the CSS to automatically extend to the footer when the content in the "right" column is longer (as in the attached. I have tried "height: 100%;" and this does not work.

Can anyone help?

http://eyes-open.com/index.html

Yeah this problem is annoying.

Another solution would be to have the container div the colour you want your nav to be, then make the contents to be another colour:

<style>
#page { background-color:blue; width: 996px; etc }
#contents { background-color:red; etc }
</style>
<div id="page">
     <div id="sidebar">
    </div>
    <div id="contents">
   </div>
</div>

ends up looking like:

 _____________________
|   |                 |
|   |                 |
|   |                 |
|   |                 |
|___|                 |
|___|_________________|

with the divs, but the colour of the background "page" will be on the left, and the background of the content will be on the right

I hope that helps. This suffers from when the right is smaller than the left :(

edit:

you can also use bg images if you so wish in this format. This is something that is very awkward to do in html/css and you just need to play until you get a solution which fits you. This took me days to research for my site :(

http://www.alistapart.com/articles/fauxcolumns/

Make a fake bg image and repeat it vertically down on the container of both. make sure the container clears the floats.

This site:

http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Has some excellent examples of all kinds of such layouts, that are very nicely done and (relatively) clean. They're what I've used in the past, and they work very nicely. They're a bit complex, but they work, and this is a notorious problem in CSS that isn't solved easily. The solution above is the best, cleanest, and most reliable solution I've found.