Rotated div causes horizontal scrollbar in Internet Explorer

Vote count:

0

I have a div (#shortcuts) outside my container div which is rotated 90 degrees. Here's the basic idea:

<div id="wrapper">
  <div id="container">
    <div id="shortcuts">Some links</div>
    <div id="content">The main content</div>
  </div>
</div>

Here's the css on #shortcuts:

position: absolute;
left: 1020px;
top: 20px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform-origin: 0 0;
display: table; /* each link within the div is a table-cell */

In Internet Explorer 11, it is creating a horizontal scrollbar. The reason is that it is rendering the width of the #shortcuts div before it rotates it.

As a "cheap fix," I've set #wrapper to overflow: hidden. However, I would prefer that to not be set because a smaller window should create a horizontal scrollbar if needed.

asked 1 min ago

MrPeanut

36

Rotated div causes horizontal scrollbar in Internet Explorer