Question

I have a div with a heading inside it that has been transformed with CSS to be rotated -90 degrees so it appears vertically.

#mydiv h2 {
    writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space: nowrap;
    width: 20px;
    height: 20px;
}

The problem is that the containing div doesn’t stretch with the text; instead, the text floats outside the div box.

How can I make the div stretch with the text?

Answer 1

Try setting width: auto; and transform-origin, but on the containing div – like this:

div {
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    transform-origin: top left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 2px green;
    width:auto;
    height:20px;
}
h2 {
    margin-top: -5px;
    background: pink;
}

You can see it in action here: http://dabblet.com/gist/2725392
Hope this helps!