CSS Float Article

[David]

The excellent Smashing Magazine has just published a great article on CSS floats (http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/). It's a particularly good explanation of their use and there's a great section on the most common problem - the collapsing parent.

Read this article because it is very important to understand how floats work when constructing page layouts.

[David]

As Kris discovered this week, parent divs will not contain floated child elements if they extend below other non-floated elements. This is because when an element is floated, it is removed from the flow of content. In a perfect world, the parent element would contain all its contents but this is one of the quirks of CSS.

However, there is a solution, in fact there are many of them. But one solution seems to have become more standard than most. It was described some time ago in this article (http://www.positioniseverything.net/easyclearing.html) and is definately worth a read.

There is a very good discussion on this (and more up-to-date approach) in Dan Cederholm's new book, "Handcrafted CSS", that I'm reading at the moment.

[Matthew]

David I attempted to follow the link to the float article (http://www.positioniseverything.net/easyclearing.html) but it seems the server is down, hopefully it is just temporary. I also attmepted a google search of the website http://www.positioniseverything.net/, just to make sure the spelling was correct but got the same response:

"Firefox can't find the server at www.positioniseverything.net."

I hope it comes back up soon.

[David]

It's working fine now.

[Stewart]

This article really helped me to better understand the topic and also by using their recommended approaches I was able to loose the additional clearing div tags :-) which are apparently old hat - but I only learned about them last week...