CSS vertical text needs to much space

Question

I'm using CSS to create vertical text. The Problem is, I want to have the text next to the previous div and no space between or after. How can I fix this this?

<div id="wrapper">
  <div class="pull-left">
      here is some stuff
  </div>
  <div class="pull-left verticalText changeCursor">I'm vertical</div>
</div>

CSS (pull-left from Bootstrap):

.changeCursor
{
    cursor: pointer;
}

.verticalText
{
    height: 100%;
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);  /* für Safari und Co */
    -o-transform:rotate(90deg); /* Opera */
    -ms-transform:rotate(90deg); /* MS IE 9 */
    transform: rotate(90deg);
}

Thanks for your help!

Answer 1

The problem is that a <div> will, by default, be as wide as it can be. Additionally, when you do the transform, the origin is by default in the middle of the element.

If you make them display: inline-block and add

transform-origin: 0 0;

to the .vertical-text rule, then the text ends up to the right of the first one, but it overlaps it. To fix that, you can use translate():

#wrapper > div { display: inline-block; }

.verticalText
{
    transform-origin: 0 0;
    -moz-transform: rotate(90deg) translate(0, -100%);
    -webkit-transform: rotate(90deg) translate(0, -100%);  /* für Safari und Co */
    -o-transform: rotate(90deg) translate(0, -100%); /* Opera */
    -ms-transform: rotate(90deg) translate(0, -100%); /* MS IE 9 */
    transform: rotate(90deg) translate(0, -100%);
}

Here is a CodePen.