CODEWITHSUNDEEP
htmlcss
copenndthagen
copenndthagen

Reputation: 50722

CSS Control dimensions/positioning of rotated text

I have a HTML code 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.

Upvotes: 2

Views: 1351

Answers (1)

Muleskinner
Muleskinner

Reputation: 14468

If you user jQuery try this: 

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

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

Live example at jsFiddle:

Upvotes: 1

Related Questions