Vertical aligned divs with rotated text (no CSS3)

Question

I'm trying to get my divs with rotated text nicely aligned and stacked in a vertical div. But no joy yet as they overlap each other. Feels like I'm missing something really simple here :-)

<div class="wrap">
    <div class="left">Flik 1</div>
    <div class="left">Flik 2</div>
    <div class="left">Flik 3</div>
    <div class="left">Flik 4</div>
</div>

CSS styles

div.wrap{
    position: relative;
    display: block;
    text-align: center;
}
div.left{
border-right: 1px solid #189028;
    border-top: 1px solid #189028;
    border-left: 1px solid #189028;
    padding-right: 4px;
    padding-top: 2px;
    padding-left: 4px;
    background-color: #bbbbbb;
    overflow: hidden;
    position: relative;    
    float: left;
    clear:both;
    -moz-transform: rotate(270deg);
    -moz-rotation-point: 0 0;
    -webkit-transform: rotate(270deg);
    -webkit-rotation-point: 0 0;
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    height: auto;
    width: auto;
}
h1{
font-weight:bold;
font-size:large;
    vertical-align: middle;
}

It can be seen and run at http://jsfiddle.net/rydmark/cGzRA/2/

Any help would be much appreciated!

Cheers /Johan

I'd just point out that the `transform: rotate` that you're using is a CSS3 property. You're just using the vendor specific prefixes. See http://www.w3schools.com/cssref/css3_pr_transform.asp — PhonicUK, Nov 05 '12 at 16:03
After some testing I used [link](http://stackoverflow.com/questions/272799/vertical-rotated-text-in-html-table) as a base ending up with http://jsfiddle.net/rydmark/TzzHy/143/ as a result. The filter: tag is only there for IE 7 and 8. Seems to work fine in IE7-9, Chrome (latest version) and FF (latest version). Not sure if it can be simplified, but at least it seems to work! — Johan Rydmark, Nov 06 '12 at 08:39

Mr. Alien · Answer 1 · 2012-11-05T15:34:23.703

Remove clear: both; property from your div.left class and give top: 30px;

Demo

Or if you want to get all the div's in a line just add margin-top: 40px;

Demo 2

Explanation for Demo 2 - Probably the div's are sticking up because you are transforming so it does consider the normal div height and than stacks up the other div, so inorder to separate them up, use margin-top: 40px; or less or more..

CSS Demo 1

div.left{
    border-right: 1px solid #189028;
    border-top: 1px solid #189028;
    border-left: 1px solid #189028;
    padding-right: 4px;
    padding-top: 2px;
    padding-left: 4px;
    background-color: #bbbbbb;
    overflow: hidden;
    position: relative;    
    float: left;
    -moz-transform: rotate(270deg);
    -moz-rotation-point: 0 0;
    -webkit-transform: rotate(270deg);
    -webkit-rotation-point: 0 0;
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    height: auto;
    top: 30px; <-------- Add this
    width: auto;
}

CSS Demo 2

div.left{
    border-right: 1px solid #189028;
    border-top: 1px solid #189028;
    border-left: 1px solid #189028;
    padding-right: 4px;
    padding-top: 2px;
    padding-left: 4px;
    background-color: #bbbbbb;
    overflow: hidden;
    position: relative;    
    float: left;
    clear: both;
    -moz-transform: rotate(270deg);
    -moz-rotation-point: 0 0;
    -webkit-transform: rotate(270deg);
    -webkit-rotation-point: 0 0;
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    height: auto;
    margin-top: 40px; <------- Add this here
    width: auto;
}

Works fine as long as I have static length of text or fixed size of the tab itself. When the length vary from 6 - 20 chars, it push longer tabs out to the right. As @eh9 writes below, the order of rendering is insane! — Johan Rydmark, Nov 06 '12 at 07:28
@JohanRydmark that's what I said, firefox wont use the height of div if you tilt, height is going to be same, you need to give margin for separating dem out ;) — Mr. Alien, Nov 06 '12 at 14:43

score 2 · Answer 2 · answered Nov 05 '12 at 15:37

The layout for rotated transforms is just very broken. The sane behavior would be that the default layout of a transformed element would be within its bounding box, however transformed, but that just isn't the case. The only way I've ever been able to get layout to be sane is with explicit size and/or positioning, as appropriate. If you get out your web debugger (e.g. Firebug) and dig into the box positioning, you'll see that they're being laid out with their sizes before the transform is applied. IMO that's completely insane, but there you go.

Vertical aligned divs with rotated text (no CSS3)

2 Answers2