24 ways to impress your friends

Jump to menu

Vote up?

Matt Wilcox

While it’s a nice example of using CSS3 selectors may I point out a more backward compatible way of achieving the three wide grid using only CSS2, for those that need it?

Instead of margin-right on the li elements, use margin-left, and then use a negative margin left on the ul to pull it into line, e.g.,

ul { margin-left : -10px; }
li { margin-left : 10px; }

This allows you to create a grid with sides flush, but without requiring advanced selectors.

Here’s a live example: http://mattwilcox.net/sandbox/edge-to-edge/edge-to-edge-alignment.html