transform: rotate is creating unwanted white space

Question

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>

I think you should play a little more with transform and transform-origin so you can have your expected results, I modified your [fiddle](https://jsfiddle.net/L2h12qm5/1/) so you can see what I'm talking, I'm not sure if that is what you wanted to do, so I'm not putting it as an answer. You can get more information of [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) and [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) — daniel.brubeck, Apr 02 '15 at 19:18
I'm asking how I can have this same rotation without leaving behind the white space at the bottom. I took a look at your edits @valarauko, but it appears that the white space is still there. — Jonathan Basile, Apr 02 '15 at 19:42
You can get rid of the white space by setting your title div with an absolute position, it did not worked with relative position because the container still has the objects height reference. Here's the [fiddle](https://jsfiddle.net/L2h12qm5/2/). I think that's what you want — daniel.brubeck, Apr 02 '15 at 19:53

score 6 · Accepted Answer · answered Apr 02 '15 at 20:55

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.

score 2 · Answer 2 · edited May 04 '22 at 14:29

2

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>

edited May 04 '22 at 14:29

isherwood

58,414
16
114
157

answered Sep 22 '15 at 14:51

Manzoor Ahmad

59
4

score -1 · Answer 3 · answered Sep 22 '15 at 11:51

-1

use this CSS property::::::

.div.titles {
    float: left;
    margin-left: 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    white-space: nowrap;
    width: 20px;
}

answered Sep 22 '15 at 11:51

Manzoor Ahmad

59
4

transform: rotate is creating unwanted white space

3 Answers3