title: Sideways tab with css-rotated tab headers
body: <p>I'm trying to make a tabbed menu in pure html and css.</p>
  
  <p>The tab menu is contained on the right side of the page, so the tabs are shown on the left-hand side of the menu. I think I got that part working ok.</p>
  
  <p>What I am struggling with is getting the text in the tabs to rotate sideways so as not to have ridiculously long horizontal tabs.</p>
  
  <p>This fidle <a href="http://jsfiddle.net/9gPXF/" rel="nofollow">http://jsfiddle.net/9gPXF/</a> here shows what i have so far. The bit that I am struggling with is getting the width of the tabs to remain manageable.</p>
  
  <p>The relevant css code is this bit:</p>
  
  <pre><code>    #RightMenu #Tabs &gt; li
      {
          display: block;
          width: 3em;
          height: 4em;
          line-height: 4em;
          border-top: 1px solid #000000;
          border-bottom: 1px solid #000000;
          border-left: 1px solid #000000;
      }
  
          #RightMenu #Tabs &gt; li &gt; span
          {
              display: inline-block;
              line-height: 1em;
              -webkit-transform: rotate(-90deg);
              text-align: center;
          }
  </code></pre>
  
  <p>The <code>li</code> elements contain a <code>span</code> which I rotate in css. The thing is that actual width of the <code>li</code> has to be sufficient to accomodate the <code>span</code> or the text break. Which is annoying, because I then have to make the tabs both wide and high enough for the text.</p>
  
  <p>How should I modify the style to get this to work?</p>
  
  <p>UPDATE:</p>
  
  <p>I might be going about this completely wrong. If anybody knows of any other way to make this work, I'd take that as an answer too.</p>