Margin after float

Saturday 29th May

Margins often behave in frustrating ways when combined with floated elements. Here’s a quick solution to one such problem.

Take this following example, in which an element with a top margin, following two floated elements, ‘sticks’ right up against those elements:

A cleared element

Even though it’s clearing those floats (with clear: both), its margin doesn’t position it away from them. In fact, that margin is effectively ‘hidden’ behind the floats (to verify this, hover your pointer over the cleared element).

It’s tempting to get around this by introducing an extra element — either an empty clearing element just after the floats, or a wrapper around them. However, in the interests of keeping markup as clean as possible, it’s often appropriate to just add bottom margin to the floats:

A cleared element

Try hovering your pointer over the first floated element to view the margin. In some cases, you might want to add that margin to all such floated elements — if they might have variable heights, for example.