Kilian Valkhof

Absolute positioning Vs. floats

It seems that there is a divide between people saying you should use absolute positioning and people saying you should use floats, both claiming that the other method breaks faster.

They’re both right.

Of course, it’s all about when you use which method. In some cases, absolute positioning breaks faster and it’s better to use floats, while in other situations it’s better to use absolute positioning because floats would break the layout. luckily for us, there is one very simple rule:

If elements should not interact, use absolute positioning, if they should, use floats.

It’s that simple. Lets take this site for example. The searchform in the top right uses fixed positioning (which mostly behaves like absolute positioning) because it will, and it must, never interact with the other elements on the website. However if you scroll down to the footer, you can see 4 lists next to each other. It’s entirely possible that there are only two or three lists available. In that case, you do not want a gap on the left or in the middle, you want the elements to interact and line up nicely starting from the left. That’s what floats do for you.

If you want a more in-depts explaination of css positioning, check out my articles on them:

• Understanding CSS positioning, part 1
• Understanding CSS positioning, part 2
• Understanding CSS positioning, part 3

So, now you know that it’s not black and white (It’s grey!). There are times when you use floats, and there are times when you use absolute positioning. In my opinion, correctly styled floats are much more robust than absolute positioning, so I personally tend to use them more. How about you?