I did this recently. I ended up using lesscss for the gory details:

  @space: 10px;
  @block: 60px;
  .block-width ( @blocks ) { width: (@block * @blocks) + ((@blocks - 1) * (@space * 2) ); }

I consider this to be the canonical piece on grid-based design:

http://www.slideshare.net/riomusi/grids-are-good-2593754

There's a new book from Khoi Vinh, just read it and liked it a lot. Also it's the first book on applying grid based design on web sites instead of print:

http://www.subtraction.com/2010/11/05/i-wrote-a-book

I know it's popular to be a contrarian, but for us non web designers who occasionally need to do page layout, the 960 Grid generator at http://grids.heroku.com/ is great. It doesn't suffer from the the cons that the author mentions - mainly bloat and overreach.

1 KB Grid is even more minimal, with no hack selectors like clearfix to puzzle over:

http://www.1kbgrid.com/

http://www.1kbgrid.com/css/grid.css - 960px example

> I also threw a “last” class on the last column to help us clear the margin.

FYI, excluding IE6, :first-child pseudo-class is universally supported. That would be a cleaner way to handle this rather than manually adding a class to the markup.

Pretty sure you can't have a width of 222.75px, it would be rounded up to the nearest pixel and wouldn't fit in the container.

A relevant SO question and an article for more in-depth analysis:

http://stackoverflow.com/questions/4308989/are-the-decimal-p...

http://ejohn.org/blog/sub-pixel-problems-in-css/