Rotated elements in CSS that affect their parent&#

Question

Let's say I have a couple of columns, of which some I'd like to rotate the values of:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

With this CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

It ends up looking like this:

Is it possible to write any CSS that will cause the rotated element to affect its parent's height, such that the text would not overlap the other elements? Something like this:

Answer 1

I know it's an old post but I found it while struggling with exactly the same problem. The solution that works for me is rather crude "low-tech" method by simply surround the div I rotate by 90deg with a lot of

<br>

Knowing the approximate width (which becomes height after rotation) of div I can compensate the difference by adding br's around this div so content above and below gets pushed accordingly.