CSS: Right align a vertically rotated text

CSS: Right align a vertically rotated text

I can't seem to align a vertically rotated div all the way to the right
side of the page: http://jsfiddle.net/F23W2/2/
HTML:
<div class="vertical">Vertical Text</div>
CSS:
.vertical {
position: relative;
background-color: #DDDDDD;
padding: 10px;
border-radius: 5px 5px 0 0;
float: right;
-moz-transform: rotate(270deg); /* FF3.5+ */
-o-transform: rotate(270deg); /* Opera 10.5 */
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
}
There is unwanted margin created between right page border and the div.
Top part of rotated div gets cropped.
Although I can use negative margins to work around, I was wondering if a
cleaner solution exists.