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 90% of the viewport. Each list item is 30% of the container, and has a 3.3% margin to it's left. This makes a 'row' add up to 103.3% 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 -3.3%. It's that simple.