How do I rotate text in css to get following output:

![enter image description here][1]hi,


  [1]: http://i.stack.imgur.com/Kcbot.jpg

Edit:

Thanks for quick suggestion. I have added my sample code in jsfidle:

http://jsfiddle.net/koolkabin/yawYM/

HTML:

    &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;

CSS:

        .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;}


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?

All Text Rotation Solutions on Gang of Coders

Total of 1 Text Rotation Solutions

How do I rotate text in css?