Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Align rotated div with another div

Align rotated div with another div

Problem

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 :

Main Content Div
Side Tab
Problem courtesy of: Chris Jones

Solution

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 :

Main Content Div
Side Tab

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%;
}
Solution courtesy of: web-tiki

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Align rotated div with another div

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×