Single gutter, multiple floats

This container holds four boxes, each 100px in width. The container itself is 220px wide. The boxes have classes ‘left’ and ‘right’, and float in those directions respectively, leaving a 20 pixel gutter.

While this technique works, it’s hardly bulletproof. If the order of boxes is swapped, and we forget to change the class names, it ain’t so pretty anymore:

Although just 2 and 3 have been swapped, two problems occur:

The gutter, which relies on ‘right’ following ‘left’, on the same line, is totally thrown out of place
Boxes 2 and 4 also swap, due to their same-side float and document order

By floating all boxes to the left (utilising the ‘same-side float’ technique), and applying a single 10 pixel margin on their left and right edges, we almost have the effect we want. The problem arises that, now, the total width increases by 20px. One possible solution is to apply an intermediate box between the container and its contents, and set negative left and right 10 pixel margins on this new box:

However, this doesn’t work in IE. I’m looking for a solution.

Single gutter, multiple floats

Comments