Question

I have CSS boxes of variable height set to float left inside a bigger div.
Now I would like to add a title where the text appears vertically (rotated 90 degrees) on the left side of the box, like shown on the link below(sorry can’t post images yet).

http://imageshack.us/photo/my-images/259/cssquestion.png

I have tried everything but so far with no luck. I assume I need to make two div (‘title’ and ‘content’) inside a ‘wrapper’ div but whatever position settings I use on the title div appears totally wrong.

Is this possible at all in CSS or will I have to use some JS to produce align the heights of ‘title’ and ‘content’ dynamically?

Thanks,
Nicolas

Answer 1

http://jsfiddle.net/3r2Sk/1/

The primary code you need is

-webkit-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-moz-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);

Ran into various issues with positioning, rotating elements can be finicky. Most of the position and widths and heights will have to be adapted to your particular situation. It would be best to start from the ground up and just copy the transform code. Use the above link as a reference.