Rotate with CSS

Question

I'm trying to rotate a simple navigation, and have it positioned to the left of the container div. However, I'm not sure how the rotate is supposed to work. For some reason, the div is not overlapping its parent and is out of site.

My desired outcome looks like this, with the text aligned to the left of the container:

http://jsfiddle.net/ges7L/

.write-note-container {
    position: fixed;
    height: 400px;
    width: 800px;
    border: 2px solid #000;
    top: 50%;
    margin-top: -200px;
    right: 0;
    background-color: orange;
}

.write-note-container .nav {
    background-color: blue;
    height: 400px;
    border: 1px solid pink;
}

.write-note-container .nav .rotate {
      -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */

background-color: red;
width: 400px;
text-align: left;
height: 100%;

}

Answer 1

add transform origin to control the origin of the rotation.

transform-origin: 0 0;

http://jsfiddle.net/ges7L/4/

Answer 2

You will need the transform-origin property set to 0, 0

.write-note-container .nav .rotate {
    /* Other properties */
    background-color: red;
    transform-origin: 0 0;
}

Demo