Edge-to-edge alignment with CSS

If you want to leave a comment, please see the blog entry that accompanies this file.

• item one
• item two
• item three
• item four
• item five
• item six

The list items above are floated, and yet they align perfectly to the edges of the containing div. The left-most items left edge is flush with the containing grey box, and the right-most list items right edge is flush with the right edge of the containing div.

How to do it

The width of the containing div is 680px. Each list item is 200px, and has a 40px margin to it's left. This makes a 'row' add up to 720px when floated left. The way to stop the last list item dropping onto a new row is to give the containing ul a negative left margin of 40px. It's that simple.

You can use other units, including percentages - just check your maths as you do it (I'm notoriously bad at maths).