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&uuml;r Safari und Co */
    -o-transform:rotate(90deg); /* Opera */
    -ms-transform:rotate(90deg); /* MS IE 9 */
    transform: rotate(90deg);
}

Thanks for your help!

What exactly do you mean by "next to"? A picture of what you want would be very helpful. — Pointy, Oct 25 '14 at 16:21
here a picture http://www.directupload.net/file/d/3786/4ylg97i9_jpg.htm the red one is div1, white area is the text-div, black would be next div — skyscraper, Oct 25 '14 at 16:26

score 1 · Accepted Answer · answered Oct 25 '14 at 16:32

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&uuml;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.

CSS vertical text needs to much space

1 Answers1