Question

I have a very basic site with a left nav bar and a larger content area on the right. They each have different backgrounds.

I want both the content and navbar to be the same height and to maintain their backgrounds. I wasn’t sure how to do this, so I put them both in a div and set its background to that of the navigation bar. When the content expands, it pushes the containing div and shows the correct background on the left:

http://jsfiddle.net/8Ngey/3/embedded/result/

When the navigation is bigger than the content, however, the background is wrong:

http://jsfiddle.net/8Ngey/2/embedded/result/

What’s the correct way to accomplish what I’m trying to do? Also, on a side note, why does the containing div have a height of 0px even when the divs inside of it have height unless I set the containing div to float left?

edit:

To clarify, I want:

• Page as long as content
• Navigation bar as long as page
• Content as long as page
• Content and navigation maintain background colors

Answer 1

Ah, you’ve discovered the near-impossibility of equal-height columns in CSS. There are a few hackish solutions out there, but the simplest? Faux columns.

Simply make a 1000px wide, 1px tall image, and repeat it vertically on the background div. Make the first 100px blue, and the next 900px green. No one will know the difference!

#background { background: url(file.png) repeat-y; }

More techniques (that are generally more trouble than they’re worth).

---

To answer your second question: floated elements will not add height to the parent (by default). To resolve this, simply set overflow: hidden or overflow: auto on the wrapper div (example):

#wrapper { background:black; overflow:hidden; }