Archive

Posts Tagged ‘Cascading Style Sheets’

[CSS] inner Container – float issue

October 7, 2011 Leave a comment

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:

 

 

 

 

 

 

 

Enhanced by Zemanta
Follow

Get every new post delivered to your Inbox.

Join 269 other followers

%d bloggers like this: