Structuring vertical text

HTML & CSS
1

If you want 2 boxes under each-other both having a title, but you want the title to be in a vertical block (h2) on the left (or right side for that matter), the titles don’t align right, how can you fix this elegantly? (If you start using pixel precise positioning, you’ll have to redo it every time the title changes length.)

<div class="section">
  <h2>Mission</h2>
  <div class="section">content</div>
</div>
<div class="section">
  <h2>Goal</h2>
  <div class="section">content</div>
</div>


h2
{
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  width:250px;
}
2

I haven’t played around much with vertical text but it seems that most are absolutely placing the text into position (or sizing it to fit) as there doesn’t really seem to be an automatic way to align the text.

You could achieve the shrink to fit algorithm using float or inline-block but I don’t think it will be usable in any normal way.

3

It’s actually easier than I thought, give the h2 a height and it works like a charm

4

Glad you found something that worked.:slight_smile:

Do you have a working example so others can see what you have done?

5

the only thing I had to do was:

h2
{
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  width:250px;
  height:250px;
}