CSS - Rotate div -90deg - Flush

Question

I have a container with text in it and another one next to it (float right). This div should reotate -90deg and has an caption-text in it.

How can I rotate this div so that it's flush with the other div?

Like in the picture. The problem is that I can't use transform-origin: right top because the "start point" shouln't be right top but variable because the text can be smaller or longer.

Answer 1

You may have to use transform-origin however, it depends on how your HTML is structured. Without any code from your side, this may be the closest to what you are looking for:

http://jsfiddle.net/2GA6H/

Using absolute positioning to place your caption text on the top right corner with matching margin (matching with padding you need on container) and then using transform-origin: top right.

Something like this:

#caption {
    position: absolute;
    top: 0px;
    right: 32px;    
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: top right;
}

Where container is relatively positioned.