How to create text vertically using html and css?

Question

I want to create a block in my website which is looks like below image:

I have tried it but not working. My html is:

<div class="timelines">
    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="1">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Sep</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left; ">
        <h4 class="timeline_heading">heading</h4>
        </div>
    </div>

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="2">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Oct</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left; ">
        <h4 class="timeline_heading" >BRICKWORKS, FLOORING, PLASTERING</h4>
        </div>
    </div>

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="3">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Nov</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left;">
        <h4 class="timeline_heading" >BRICKWORKS, FLOORING, PLASTERING, ELECTRICAL, PLUMBING, HEATING, ALUMINIUM</h4>
        </div>
    </div>

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="4">
        <div style="width:100%; float:left;">
        <div class="timeline_circle">
        <div class="timeline_year">2015</div>
        <div class="timeline_month">Dec</div>
        </div>
        <div class="line"></div>
        </div>
        <div style="width: 100%; float: left; ">
        <h4 class="timeline_heading" >fvbfgb</h4>
        </div>
    </div>
...
</div>

And my CSS is:

.timeline_heading 
{
    transform: rotate(-90deg);
    moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

In above example for third block rotate text is overwrite to other content. How to do that?

You've already tagged right keyword? Did you try something? Your current HTML/CSS would be helpful. — sinisake, Sep 26 '15 at 11:30
Yes I have tried but my text overwrite the corresponding circle. — Vinaya Maheshwari, Sep 26 '15 at 11:58

score 0 · Answer 1 · answered Sep 26 '15 at 11:31

0

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
}

Source: http://davidwalsh.name/css-vertical-text

answered Sep 26 '15 at 11:31

DrWatson

418
3
9

score 0 · Answer 2 · edited May 23 '17 at 10:27

you can try this one method:

<table>
    <tr>
        <th><div class="rotate horizSpace">Foo</div></td>
        <th><div class="rotate horizSpace">Bar</div></td>
         <th><div class="rotate horizSpace">doo</div></td>
        <th><div class="rotate horizSpace">carr</div></td>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
        <td>30</td>
        <td>40</td>
    </tr>
</table>

And css:

td {border: 1px solid #ccc; padding:5px;}
th {background-color: #666; color: #fff; padding: 5px;}
table { border-collapse: collapse; }
body {font-family: verdana; font-size: 11px; }

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg); 
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.horizSpace
{
  padding: 5px 0;    
}
.rotate { filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 and below */
.rotate { filter /*\**/: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 standards mode */
:root .rotate { filter: none; }  /* remove hack in IE9+ */

Here My demo

Refer this page

Thanks for reply, but it's not working for my html because when rotate text increase then it increase width of but I want to increase height of . — Vinaya Maheshwari, Sep 26 '15 at 12:25

How to create text vertically using html and css?

2 Answers2