Quick simple problem

For my main content, I have the following heirarcy:

[CODE]<div id=”main”>

<div class=”mainleft”>
<p>This is a bit of text</p>
<div class=”maininnerleft”>
<p>This is text</p>
</div>
<div class=”maininnerright”>
<p>This is text</p>
</div>

</div>

<div class=”mainright”>
<img src=””/>
</div>

</div>[/CODE]

OK, and in my style.css I have something like this:

[CODE]#main {width: 800px; background-color: #eeeeee; margin: 0 auto;}
.mainleft {float: left; width: 500px;}
.mainright {float right; width: 250px;}
.maininnerleft {float: left; width: 220px;}
.maininnerright {float: right; width: 220px;}[/CODE]

So the desired effect would be a big box, split in to 2 columns, and in the left column it would have some text and then 2 more bits of text side by side below.

This layout is fine, the problem is with the background color coming from #main, it doesnt seem to display unless I actually set a height or put a few &nbsp things in but I dont want to set a height because I want the height to be determined by how much text is in the divs within.

Is there an alternative way to do this?

Thanks.

Also in #CSS _↴