Vertical CSS3 Title in widget / block / panel

Recently, I had to create a theme that involved vertically aligning text along the left side of some content. After a lot of trial an error, I finally landed on a reliable way to position the vertical text using only CSS.

The first example below uses the minimum markup and css needed to make this work. The second example does it with the Bootstrap panel component markup. Please ignore the javascript in both examples, as that only controls the “Watch it happen!” checkboxes.

Let’s take a look at the HTML:

<div class="box">
  <div class="title">...</div>
  <div class="content">...</div>
</div>

Pretty straight forward. You have a title and content, together within a container element.
Now the CSS:

.box {
  position: relative; /* contain the absolute position of the title element */
  padding-left: 40px; /* the height of the title element */
}
.title {
  line-height: 40px;   /* the height of the title element */
  white-space: nowrap; /* don't allow the title text to break lines */
  position: absolute;  
  right: 100%;         /* move the title element to the far-left of the container */
  transform-origin: top right 0;  /* this is the key. rotate from the top right corner of the title element */
  transform: rotate( -90deg ); /* rotate title element into position */
}

That’s great and all, but it still has a lot to be desired. For one, since we can’t tell the title element to “be as wide as the container is high”, the title’s background color will not always reach the bottom of the container. Inversely, if a title is too-long it will poke out the bottom of the container.

For the first problem of the title being too short, a friend of mine offered the great solution of using a background gradient on the container element.

background: linear-gradient(to right, darkolivegreen 0%, darkolivegreen 40px, rgba(100,100,100,0.1) 40px);

Ignore the colors, they can be whatever you choose. The take-away here is that the gradient successfully emulates the visual of a “title background” by only going for 40px from left to right. That 40px should be familiar, because it is the line-height of our title element.

For the second problem of the title being too long, I got lazy and just put a min-height on the container element. I decided that if the content element was empty, I still expect the container element to take up the vertical space necessary to display the title correctly. Otherwise, that title will overlap other content on the page and I wouldn’t sleep at night.

Generic:

See the Pen Vertical title bar with CSS transform by Jonathan Daggerhart (@daggerhart) on CodePen.

Bootstrap Panel:

See the Pen Vertical title bar with CSS transform by Jonathan Daggerhart (@daggerhart) on CodePen.