CSS framework that can accommodate an unaligned grid for divs

I was wondering if there was a css framework to accommodate the layout I've drawn here:

I tried just using tables before, but when you start adding in borders, things get disgusting fast.

I tried to do using 960gs and it didn't do it for me. The Square Grid seemed appropriate, but it looks like the horizontal squares are just for show and if they are not, I can't find any explanation开发者_如何学JAVA on how to use them (the demo only does vertical alignment).

EDIT: The crummy table layout I already have: http://jsfiddle.net/TXcQV/ Notice how on hover everything moves, and more annoying, which you can't see is how the borders overlap each other in a way that can not be controled.

---

I'd recommend using Blueprint CSS. Check this link for the grid demo: http://www.blueprintcss.org/tests/parts/grid.html

It is very easy to use and the results will be pretty nice too.

Also, found this great tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/

And you may also wanna follow this video tutorial: http://www.youtube.com/watch?v=KHLrEF9tHjw

Hope this helps.