Menu
I have a page which uses transform: rotate, but leaves a large whitespace where the element would have been were it not rotated. I have found a couple of other people asking a similar question, but I have been unable to adapt those answers to solve my present problem. I think that they probably contain the correct solution, and I am just making a mistake in trying to apply it to my case:
Css rotate div creates white space on top
White space around css3 scale
As you can see, there's a lot of white space beneath the rotated text. I would like the text to end up in the same place, without that white space.
div.titles {
transform: rotate(90deg);
display: inline-block;
right: 0;
left: 367px;
height: 260px;
top: -4px;
}
p.volumes {
padding: 0;
font-family: "Arial Narrow";
line-height: 220%;
font-size: 10;
}
ul.titles {
list-style-type: none;
text-align: center;
}
ul.titles li {
padding: 8px;
font-family: "Subway", "Courier", "serif";
font-size: 11px;
color: #000000;
}<BODY>
<DIV class="titles" id="sideways" style="position: relative;">";
<p class="volumes" id="volumes"></p>";
<ul class="titles">
<li>ale.imzqzfojdobcggydk</li>
<li>mouwl sxjjwrk,osbl</li>
<li>cqjpjfeqhgovtto</li>
</ul>
</DIV>
</BODY>
402
By making the rotated element 'block' rather than 'inline-block', the space below disappears.
div.titles {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
display: block;
right: 0;
left: 367px;
height: 260px;
top: -4px;
}
As you can see in this edited fiddle, new text added falls right below the rotated text without a gap.
184
New Solution For You, If above CSS not work for you so use this trick. Add a Span element in the TD element. you can add margin-left and right.
<td>
<span style="float: left;
transform: rotate(-90deg);
white-space: nowrap;
width: 30px;">
VACATE ORDER
</span>
</td>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
