Problems with equal height columns

Question

This is my CSS:

#contents { clear: both; width: 900px; background: #fff url(../img/contents_bg.jpg) repeat-y; }
#contents .left { float: left; width: 615px; padding: 10px 0 0 20px; }
#contents .right { float: right; width: 225px; padding: 10px 20px 0 0; }

And HTML:

<div id="contents">
 <div class="left">
  <p>test</p>
 </div>
 <div class="right">
  <p>test 2</p>
 </div>
</div>

For some reason the contents_bg.jpg background image won't show unless I put a height on the #contents which I cant do, any ideas?

Answer 1

Something needs to add more height to it. Either the children divs need more content to increase that space or you need to specify a height on contents. There really is no way around it.

Answer 2

Your div#contents is not floating and therefore does not stretch to contain its floating content. The Floatutorial is a good read on that. There are other workarounds for that scenario available, but most include introducing some unnecessary markup, like a clearing div at the bottom of div#contents.