Keep div height in line with text that has been rotated

css, html

Solution

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!

Problem

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?

Original source

Related problems