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
• item seven
• item eight

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.

Additionally, there's a minimum width set of 600px for the site itself, meaning that each 'cell' will never drop below 120px wide.

How to do it

The width of the containing div is 90% of the viewport. Each list item is 20% of the container, and has a 5% margin to it's left. This makes a 'row' add up to 105% 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 -5%. It's that simple.