How do I rotate text in css to get following output:

![enter image description here](https://i.stack.imgur.com/Kcbot.jpg)hi,

Edit:

Thanks for quick suggestion. I have added my sample code in jsfidle:

<http://jsfiddle.net/koolkabin/yawYM/>

HTML:

```
<div class="mainWrapper">
    <div class="rotateObj">
        <div class="title active">First Text Title</div>
        <div class="content">
            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...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            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...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            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...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            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...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            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...
        </div>
    </div>
</div>

```

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?
['https://Stackoverflow.com/questions/6028128', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/178301/']
I guess [this](http://snook.ca/archives/html_and_css/css-text-rotation) is what you are looking for?

Added an example:

The html:

```
<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

```

The css:

```
.year
{
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}

```

Alle examples are from the mentioned site.
You can use like this...

```
<div id="rot">hello</div>

#rot
{
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg);    
    width:100px;
}

```

Have a look at this fiddle:<http://jsfiddle.net/anish/MAN4g/>