Making Nested DIVs Expand

[Komodo_Tale]

I've wandered over from the Google forum where I usually hang-out, and while I am pretty adept, the problem of float:right/left nested DIVs not automatically expanding (contents bleed out) continues to perplex me. I've read posts and tutorials with mixed results so could someone please give me an explanation of how (and why!)to make nested DIVs expand, something that a third-grader could understand?

Thank you very much.

[cuce]

I don't know if my way is the best way but here's how I handle floats and I never seem to run into any issues.

First of all, I always make sure may containing div has a specified width.
Then I have 2 divs inside the container, One float:right, one float:left and I always make sure to specify their widths as well. After those two divs I have a div which has no purpose other than clearing the floats. It works great, but that clearing div has always annoyed me.

The end result looks like the following:
css:
#container{width:500px;}
.left{width:200px;float:left;}
.right{width:200px;float:right;}
.clear{clear:both;}

html:
<div id="container">
<div class="left"><img src="lalala.jpg" alt="" /><p>text text</p></div>
<div class="right">text text text text</div>
<div class="clear"></div>
</div>

[Komodo_Tale]

thx qc

[lexipixel]

It appears the job of the "clear:both" is to clear the document flow so the .left classed div won't float up next to something else, so why not just add the clear:both setting there, e.g.-

The end result looks like the following:
css:
#container{width:500px;}
.left{ clear:both; width:200px;float:left;}
.right{ width:200px;float:right;}

html:
<div id="container">
<div class="left"><img src="lalala.jpg" alt="" /><p>text text</p></div>
<div class="right">text text text text</div>
</div>