CSS Control dimensions/positioning of rotated text

I have a HTML code 开发者_Go百科as

<div class="fl">
<div class="titleTextV">My ABC</div>
</div>

Now I have applied the CSS to rotate text as;

.titleTextV{
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:1.3em;
    background:#999;
    height:100%;
}

I want this titleTextV class to span the entire height of its container 100%, no px value and be positioned inside, but currently the text is moving out of the box.

If you user jQuery try this:

$('.fl').height($('.titleTextV').width());

And add display: inline-block; to your titleTextV class.

Live example at jsFiddle: