Keep div height in line with text that has been rotated

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?

Maybe the behaviour was different in 2012, but nowadays, `writing-mode: tb-rl` with `*-transform: rotate(-90deg)` results in the two cancelling each other out and the text being written horizontally. The CSS given here (and in the accepted answer below) fails to rotate the text in a modern browser. — Mark Amery, Dec 17 '17 at 16:06

score 2 · Accepted Answer · edited Dec 17 '17 at 16:16

2

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!

edited Dec 17 '17 at 16:16

Mark Amery

143,130
81
406
459

answered May 18 '12 at 13:58

Ana

35,599
6
80
131

I've just edited my answer. Does it work like this? With this newer version, if I keep adding text inside the h2 tags, both the h2 and the div stretch... – Ana May 18 '12 at 14:06
-1; besides the fact that this doesn't work in modern versions of Chrome (perhaps it did in 2012!), you're just shifting the problem up one element in the hierarchy. Okay, so you can rotate the h2's parent instead of the h2; now, how do you make the *parent's parent* grow in height to contain them? – Mark Amery Dec 17 '17 at 17:50
@MarkAmery To be fair, it's not Ana's fault that Chrome breaks stuff with every update. Also, it still works fine in Firefox 57. – TylerH Jan 03 '18 at 14:48

Mark Amery · Answer 2 · 2017-12-17T22:24:48.393

For an approach with transform, see this answer of mine to a similar question: https://stackoverflow.com/a/47860039/1709587

Alternatively, just using writing-mode: vertical-lr (or the deprecated writing-mode: td-lr) seems to work fine in modern versions of Chrome; the containing div will correctly accomodate the h2 within it, and no transforms are needed. See the example below:

#container {
  /* Pink background for easier visualisation of the end result */
  background: pink;
  
  /* Optional; shrinks width of div to minimum required to contain h2 */
  display: inline-block;
}

#container h2 {
  /* Note that the td-lr value used in the question is deprecated;
     vertical-lr is the modern equivalent. See:
     https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

     Consider also using
       -webkit-writing-mode: vertical-lr
     and
       -ms-writing-mode: td-lr
     for compatibility with older browsers. */
  writing-mode: vertical-lr;

  /* Optional; flips the heading, so that it is written bottom-to-top
     instead of top-to-bottom.
     Consider also using -webkit-transform and -moz-transform and
     -o-transform and an equivalent transform with filter for compatibility
     with old browsers.*/
  transform: scale(-1, -1);
  
  /* Optional: disable breaks in the title */
  white-space: nowrap;
}

<div id="container">
  <h2>Some text</h2>
</div>
<div>
  More stuff
</div>

However, you'll find a slew of layout bugs if you try to get this working on current (December 2017) versions of Firefox, Edge, or Safari; the four major browsers have fairly broken handling of vertical writing-modes at the moment. They're not consistent with each other, and they're frequently not even deterministic - you can toggle a style rule off and on again at the dev tools and end up with a differently laid-out page. As such, while this approach is an option, beware using it and test extensively if you do.

score -1 · Answer 3 · answered May 18 '12 at 13:46

-1

You have to target the div size and not the h2 size add the below code and check.

#block-views-archive-block {
height: 20px;
width:20px;
overflow: visible;
}

answered May 18 '12 at 13:46

tam

352
1
3
13

Thats not right, the height of the containing div depends on how many characters in the h2 title, so the containing div must be an auto – James Kirkby May 18 '12 at 13:50

score -1 · Answer 4 · answered Aug 16 '12 at 19:44

What if you just transformed the div instead of the text, believe by doing that, it will also transform the div's contents.

you could also set the height to auto.

or you could just try increasing the height manually by adding the necessary amount of pixels.

I hope one of these solutions works!

-Brian

Keep div height in line with text that has been rotated

4 Answers4