[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.

http://forums.asp.net/t/1727780.aspx/1?float+left+issues+lists+

 

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:

http://www.sitepoint.com/simple-clearing-of-floats/

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

 

 

 

 

 

 

 

Related articles

• Put.js: CSS selector-based function for creating and manipulating the DOM (github.com)
• Divitis: What It Is And How To Cure It | CSS Creator (csscreator.com)
• How to create you own Gmail like loader / progress bar with Jquery (justgagan.wordpress.com)
• Adobe Dreamweaver CS5 – Part 2: Creating the page layout (ramcomputerltd.wordpress.com)
• Adobe Dreamweaver CS5 – Part 4: Adding the main image text (ramcomputerltd.wordpress.com)
• JavaScript, CSS3, Silverlight, ASP.NET, SharePoint articles Link List – July 2011 (devcurry.com)