Container div problem

Gidday

I have a main container div (#mainContainer), which contains another container div (#returned), that has HTML retrieved from php via AJAX displayed in it. The problem is that #returned is over-running the border of #mainContainer.

I notice that giving #mainContainer a left float fixes the problem, but I want it to be centered, not aligned left.

How do I make #mainContainer adjust to the height of #returned? Is it a matter of having a third div to contain the other two, and float this new one left, or is there a better way to do this?

CSS (display is 'none' as this div is shown when a button is clicked):
.mainContainer { background-color:#252525; display:none; border:solid #555; border-width:thin; padding:8px; color:#fff; height:auto; margin-left:auto; margin-right:auto; width:294px; }

html:

<div class="mainContainer">

some text in here

<div id="returned" style="width:100%; background-color:#0F0; height:auto; float:left; display:block;"></div>

</div>

Thanks for your help.

Just remove width:100% and Float:left properties from returned <div>

and try :)

Thanks Vikram - that worked perfectly!

Would you mind explaining why?

Cheers

When you float something, it is removed from the usual flow of the page, and doesn't directly respond to its parent, this cannot be positioned (centered) by typical means.

As for width, this is one I've always found frustrating. As much as I wish width: 100% meant "fit to 100% of your parent", I've found it to actually mean "fit 100% of the screen width"... someone correct me if I'm wrong on that one.

Cheers Keleth