[CSS] inner Container – float issue

An age old problem apparently where a inner div is attached to a outer div element in the DOM tree. Now usually when the inner div grows in size (i.e. content is added), the outer div will size accordingly. The issue is when a float is applied to the inner div. This causes the container div to ignore what is happening to the inner div element, thus it will not resize based on the inner div.


Right, confused? Too many div’s to!  Here is an example of a page with float:left applied to the list elements (li):





As you can see, the list elements are floating left, BUT the outer div container (white block), hasn’t resized. Now removing float:left shows you how i want the container div (outer) to behave:






Unfortunately my lists are not behaving correctly. Now because im new to HTML/CSS i added a forum post to asp.net forums, where a kind chappy told me about the clearfix resolution.



On Googling this fix to locate what it is doing, i found the following post which mentions an even cleaner fix adding overflow:auto to my outer container div:


And like magic, this has worked! And here is the proof:








Enhanced by Zemanta

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.