Aligning floating divs with rotated text

Using css3 transform, I'm trying to create a table structure using floating divs and the header text is rotated 90 degrees.

http://jsfiddle.net/VNk2u/

I'm having trouble lining it up properly. Does the transform happen after it开发者_Python百科 applies the other attributes (so should I switch height and width around? and margins?) I'm stuck getting it to align properly. Can someone please look at the jsfiddle link and let me know what I'm not doing right?

(I'm using Chrome to view it)

There seem to be many inconsistencies between browsers with regards to CSS3 rotation, as well as issues with the box modelling resulting from the rotation.

I think using a table for this is perfectly acceptable given the type of data you are displaying, and I also believe it would entirely solve your problem.

Putting your header columns in markup similar to the following would work more effectively IMO.

http://jsfiddle.net/VNk2u/8/