Keep div height in line with text that has been rotated - html

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!

Answer 2

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.

Answer 3

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;
}

Answer 4

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