Intermediate CSS Techniques

CSS Floats vs the Normal Flow

The float property in CSS is one of the most confusing properties for beginners. Essentially, the normal flow of a document how it will display with no positioning or floating. The content flows down the page, starting with the first element and finishing with the last. Floating any element in the document (1) places it in a box, (2) taken out of the flow, (3) shifted as far left or right as possible. Content can flow to the right (of a left-floated) or the left (of a right-floated) element.

This video walks you through some of the behavior of float:

You can download the XHTML file with CSS and images that I used in this example here.

More on Floats from Floatutorial

If you need to read a thorough refresher on the float, I recommend the following pages from Maxdesign's very thorough Floatutorial: