rotate text/div 90 degrees (static)

Question

Needing a cross browser method to rotate a div 90 degrees, and all elements within are rotated accordingly. This is for a static placement (not an 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);

edit Added Opera CSS

Answer 2

If anyone 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! :)