skip to table of contents

CSS Floats are critical

Until IE comes out of the dark ages and begins supporting css2.1, the float property will remain the most powerful and the most flexible layout tool we have.

The Gotchas will getcha

The css float, along with position are easily the least understood of all properties. It doesn't take but a few run-ins with relative and absolute positioning to bring yourself up to snuff. In a nutshell, AP elements are completely out of the flow, while RP elements are in the flow and their shifted contents are out.

Floats, though, … are neither fish nor fowl nor good red meat. They are completely out of the flow, but inline elements are aware of them, and block elements are not. IE’s feature-full/buggy—I don't know what Microsoft was thinking—hasLayout has caused many developers hours of anguish as IE’s float model refused to work as advertised.

In this section we shall demonstrate how floats are supposed to work, and how to deal with IE without breaking things for modern browsers.

Table of Contents