CSS3 Rotate and Auto Width

Question

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>

SharkofMirkwood · Accepted Answer · 2013-07-14 23:18:17Z

0

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/

answered Jul 14, 2013 at 23:18

SharkofMirkwood

13k2 gold badges20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1514042 Over a year ago

I think you are missing the point - width of the container doesn't change anything. Just make the text twice as longer as it is and set width of the container to 40px, which should suffice - it won't work!

Collectives™ on Stack Overflow

CSS3 Rotate and Auto Width

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related