Rotate text / div 90 degrees (static)

Question

You need to use the cross-browser method to rotate the div 90 degrees, and all the elements inside rotate accordingly. This is for static placement (not animation).

Best practice

Answer 1

You can use CSS to rotate the contents of a div:

/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

change Added Opera CSS

Answer 2

If someone is stuck trying to implement this in IE8, try the following CSS:

writing-mode: vertical-lr;
-ms-writing-mode: bt-lr; /* IE8 */

https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

It worked for me! :)