CODEWITHSUNDEEP
csscss-transforms
JsCoder
JsCoder

Reputation: 1733

CSS3 Rotate and Auto Width

How do I make to adjust its width by the size of rotated div - currently it gets oversized as if its contents wasn't rotated.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .rotate270 
        {
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td rowspan="2" class="standard-padding" style="background-color: #ccc;">
                <div class="rotate270" style="background-color: gray; color: white; padding: 5px; font-size: 10px; font-weight: bold;">Test 123</div></td>
            <td rowspan="2"></td>
            <td style="font-size: 10px; font-weight: bold;"></td>
        </tr>
        <tr>               
            <td style="font-size: 10px;"></td>
        </tr>
    </table>
</body>
</html>

Upvotes: 0

Views: 215

Answers (1)

SharkofMirkwood
SharkofMirkwood

Reputation: 12621

I don't think you can do this without using Javascript. Here's a quick example using JQuery:

$('#cell').css('width', $('#cell .rotate270').height());

http://jsfiddle.net/cR6DF/

Upvotes: 1

Related Questions