Div Auto Height

[aerofanatic]

I'm just going to put a simple version of my code here.


<div id="abc">
<div id="def">
<!-- dynamic content here -->
</div>
</div>


#abc
{
width:1024px;
margin:auto;
padding:0px;
background-image: url(../Images/Sat_Home_Mid-Bg.jpg);
background-repeat:repeat-y;
height:700px;
}
#def /* dynamically generated content here */
{
width: 193px;
margin:auto;
padding:0px;
float:left;
}

The problem here is that the abc div does not auto-size and the def div layer ends up floating on top with the abc div not visible. Any ideas?

I think clear:both is supposed to be used somewhere, but I can't seem to be able to figure out where and how.

Thanks for your help in advance.

[infinityspiral]

You put the clear in after the float- before the last div ending, and after the second-to-last div ending. You can also use:
<br clear="all" />

[aerofanatic]

Hey, the clear:both; doesn't seem to work when i put it inside the def div css. However, the <br clear="all" /> works.

I need to be using this code for hundreds of pages so can you please tell me why this isn't working?