I have tried numerous ways to create a wrapper div and rotate a series of divs containing text so that the rotated text always lines up on the bottom of the wrapper div. Whenever I do this, the entire wrapper div rotates too.
In this example. I it works except the boxes are not next to one another. Overlapping I think is what I want. I just don't know how to get there. In order to overlap the boxes so that the text lines up stacked horizontally, do I have to do some kind of position thing? <html xmlns="http://www.w3.org/1999/xhtml <http://www.w3.org/1999/xhtml>"> <head> <style type="text/css"> .divOuter{ display:inline; text-align:bottom; } .divInner1, .divInner2, .divInner3, .divInner4{ -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); border: 1px dashed; float:left; width:160px; height:20px; margin-left:3px; margin-right:3px; position:relative; } </style> </head> <body> <div style="margin-top:50px;position:fixed;" <div class='divOuter'> <div class='divInner1'>First DIV</div> <div class='divInner2'>Second DIV</div> <div class='divInner3'>Third </div> <div class='divInner4'>fourth</div> </div> <div> </body> </html> ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
