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.
Let’s take a look at the HTML:
Pretty straight forward. You have a title and content, together within a container element.
Now the CSS:
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.
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.