Positioning Rotating Div Elements

Question

I'm having difficulty positioning a rotating div element. So far I:

#side-banner { transform: rotate(270deg); } 

which changes my div perfectly. however, I am having problems “fixing” it on the left side. (IE, as a rule, I did something line by line as: fixed position, left 0px, height 100%, width: whatever).

Answer 1

If you want the banner to rotate and lock in the left part of the browser window, you can use the transform-origin property. The default value is 50% 50%. This is 50% of the width and height of the element (center of the element).

You can try to set the origin to 0% 0%. what's the upper left corner of the banner, and then rotate it around that corner. Now, when the banner rotates, the origin becomes the bottom left corner of the banner. You can place it on the left side of the browser window as follows:

 #side-banner { poition:fixed; left:0; top:50%; width:300px; /* after rotation this is the height */ margin-top:150px; /* is 50% of width */ transform: rotate(270deg); transform-origin:0% 0%; /* set to the upper-left corner */ -ms-transform: rotate(270deg); /* IE 9 */ -ms-transform-origin:0% 0%; /* IE 9 */ -webkit-transform: rotate(270deg); /* Safari and Chrome */ -webkit-transform-origin:0% 0%; /* Safari and Chrome */ } 

Edit:
If you want the banner to be the same height as the browser window after rotation, this can be done using javascript or jQuery. Like this:

 var width = $(window).height(); var marginTop = Math.round(width / 2); $('#side-banner').css({ 'width': width, 'margin-top': marginTop }); 

Answer 2

I am sure that I could just leave a comment instead, because I am not 100% sure that I understand the problem you are facing.

I feel that your problem can be solved by encapsulating your rotated div banner into normal and set the container div position to both fixed and left: 0px. I created a fiddle to show you what I mean:

http://jsfiddle.net/q7qgn/1/

HTML:

  <div class="pageContainer"> <div class="bannerContainer"> <div class="banner"> &nbsp;banner </div> <br/>bannerContainer </div> </div> 

CSS

  .pageContainer{ margin: 0px; background-color: grey; width: 400px; height: 400px; } .bannerContainer{ background-color: green; width: 100px; height:200px; position: fixed; left: 0px; } .banner{ background-color: red; width: 100px; height: 100px; transform: rotate(270deg); -webkit-transform: rotate(270deg); } 

Hope this helps!