Gordon’s Place

Based on a conversation I had a couple of days ago. There are 3 things, or 3 rules, you need to remember when using CSS floats. If you understand and remember these three points then you should never have any bother with floats. Otherwise, well, you might be lucky….

1. Give it a width. Everything that you want to float should have an explicit width, simple as that.

2. float: left/right means just that. If you float:left a div, it will go as far to the left of the containing block as it can. IOW it will go immediately to the left of the right hand edge of the previous element. If there isn’t enough room in the containing block for an element of this width ( see point 1 ), then it will shuffle down until there is enough room for it. float:right follows the same rules, just mirrored.

3. Subsequent elements can wrap around. Floating an element will have no effect on any preceding elements in the HTML, but subsequent elements can and will wrap around any free space to either the right ( for float:left elements ) or the left ( for float:right ). To prevent this, use clear:left/right or clear:both on the subsequent elements styling.

That’s it. You have just mastered CSS floats.