CODEWITHSUNDEEP
htmlcsscss-transforms
Chris Jones
Chris Jones

Reputation: 415

Align rotated div with another div

I have a main div (the red div in the fiddle) that has a smaller vertical tab on the side (the blue div in the fiddle).

The RED div is standard BUT the Blue div is rotated through 90 degrees (as I need to have vertical text in it). This is where the problems starts.

The red div is vertically positioned at 50% so it is in the middle of the page and locked with scrolling etc.

I want to align the blue div so that the top edge of the blue div is at the same Y position as the top edge of the red div.

I would prefer NOT to use jQuery but can do if required.

Desired output :

enter image description here

Fiddle is here : http://jsfiddle.net/kBKf6/

Here is the code I am using :

<div id="main" style="position: fixed; top: 50%;  margin-top: -250px; left:0;   height: 500px; width: 450px; background-color:red;">
Main Content Div
</div>
<div id="vertical_div" style="overflow:hidden; position: fixed; left:350px; height:40px; width:200px; margin: auto; background-color:blue; text-align:center; color:white; -webkit-transform: rotate(90deg) translate(-50%, -50%); -moz-transform: rotate(90deg) translate(-50%, -50%); -ms-transform: rotate(90deg) translate(-50%, -50%); -o-transform: rotate(90deg) translate(-50%, -50%); transform: rotate(90deg) translate(-50%, -50%);">
Side Tab
</div>

Upvotes: 2

Views: 1442

Answers (2)

web-tiki
web-tiki

Reputation: 103780

You don't need JS to align the rotated div. You can define a transform origin in CSS then, it becomes easy to align.

  • Side note : You can remove the -moz- and -o- vendor prefixes see caniuse

DEMO

HTML :

<div id="main">Main Content Div
    <div id="verticaldiv">Side Tab</div>
</div>

CSS :

#main {
    position: fixed;
    top: 50%;
    margin-top: -250px;
    left:0;
    height: 500px;
    width: 450px;
    background-color:red;
}

#verticaldiv {
    overflow:hidden;
    position: absolute;
    left:100%;
    bottom:100%;
    height:40px;
    width:200px;
    background-color:blue;
    text-align:center;
    color:white;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg);
    -ms-transform-origin:0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

Upvotes: 8

Roman
Roman

Reputation: 6428

You can also do it without relying on hardcoded sizes that move your div into position, but you need a wrapper around your .verticaldiv

demo: http://jsfiddle.net/MCr6f/

demo 2: http://jsfiddle.net/9LtKw/ (to show that different sizes don't matter)

html:

<div class="one">
    Hello
    <div class="pivot">
        <div class="two">
            Pretty!
        </div>
    </div>
</div>

css:

.one {
    background: red;
    position: relative;
    float: left;

     /*strange and difficult sizes*/
    font-size: 3.237827em;
    padding: 10px;
}

.pivot {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 0px;
    height: 0px;
}

.two {
    background: blue;
    color: white;
    position: absolute;
    left: 0;
    bottom: 0;

    /*strange and difficult sizes*/
    font-size: 12px;
    padding: 0.3em;
}

Upvotes: 0

Related Questions