title: How do I rotate text in css?
body: <p>How do I rotate text in css to get following output:</p>
  <p><img src="https://i.stack.imgur.com/Kcbot.jpg" alt="enter image description here" />hi,</p>
  <p>Edit:</p>
  <p>Thanks for quick suggestion. I have added my sample code in jsfidle:</p>
  <p><a href="http://jsfiddle.net/koolkabin/yawYM/" rel="noreferrer">http://jsfiddle.net/koolkabin/yawYM/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;mainWrapper&quot;&gt;
      &lt;div class=&quot;rotateObj&quot;&gt;
          &lt;div class=&quot;title active&quot;&gt;First Text Title&lt;/div&gt;
          &lt;div class=&quot;content&quot;&gt;
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
          &lt;/div&gt;
          &lt;div class=&quot;title&quot;&gt;First Text Title&lt;/div&gt;
          &lt;div class=&quot;content hide&quot;&gt;
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
          &lt;/div&gt;
          &lt;div class=&quot;title&quot;&gt;First Text Title&lt;/div&gt;
          &lt;div class=&quot;content hide&quot;&gt;
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
          &lt;/div&gt;
          &lt;div class=&quot;title&quot;&gt;First Text Title&lt;/div&gt;
          &lt;div class=&quot;content hide&quot;&gt;
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
          &lt;/div&gt;
          &lt;div class=&quot;title&quot;&gt;First Text Title&lt;/div&gt;
          &lt;div class=&quot;content hide&quot;&gt;
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
              Here goes my bla bla bla text and more stuffs...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>    .mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
      .rotateObj{position:relative; height:400px;}
      .rotateObj .title{
          float:left;
          background:gray;
          width:50px;
          height:100%;
          
          /** Rounded Border */ 
          border-radius:5px;-moz-border-radius:5px;
          
          /** Rotation */
          -webkit-transform: rotate(-90deg); 
          -moz-transform: rotate(-90deg);    
          transform:rotate(-90deg);
          filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
      .rotateObj .active{background:green;}
      .rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
      .hide{display:none;}
  </code></pre>
  <p>The problem I am facing is that when we rotate the text then it breaks the alignment and positions. So what is causing that, and how can I manage them?</p>