Edge to edge alignment with CSS
A tricky issue with CSS is trying to get a row of floated objects to line up with your page properly, edge-to-edge. For example, getting the first element on a row to line up with the left edge of your website, and the last element in the row to line up with the right edge of the website. Something a little like this:
Well, getting edge-to-edge alignment on floated objects is actually very easy; here’s now.
Use a negative margin on the containing element that is the same value as the gap between the floated objects. It’s that easy. It’s easier to understand if you take a look at the example code.
Note that the maths is a bit squiffy (term borrowed from Mr Hicks). In this first example, it’s a fixed width layout, but it’s easy to go liquid (or even elastic). The container div’s width is 680px. But the row of three floated items adds up to 720px (40px margin + 200px list item + 40px margin + 200px list item + 40px margin + 200px list item). Normally the last list item would drop to a new row because it’s too wide, but we solve two problems in one go. Because the margin is on the left, the whole list is shunted 40px too far to the right. By putting a -40px margin on the ul, that brings the left-edge of the first item flush to the left edge of the container div, and it also means that the last list item fits on the row. And that’s that.
Please note that, while I’ve meant to write-up my technique for ages, the only reason I am now is because of a link from Hicksdesign to someone proposing another solution for this issue. I think mine is a little nicer, but they both do the job and are both worth looking at.