...

View Full Version : Container div problem



shaunthomson
07-31-2012, 07:19 AM
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.

vikram1vicky
07-31-2012, 09:16 AM
Just remove width:100% and Float:left properties from returned <div>

and try :)

shaunthomson
07-31-2012, 03:50 PM
Thanks Vikram - that worked perfectly!

Would you mind explaining why?

Cheers

Keleth
07-31-2012, 05:20 PM
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.

shaunthomson
08-02-2012, 06:10 AM
Cheers Keleth



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum