CODEWITHSUNDEEP
htmlcss
MrPeanut
MrPeanut

Reputation: 207

Rotated div causes horizontal scrollbar in Internet Explorer

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:

#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.

jsfiddle: https://jsfiddle.net/0drcch87/4/

Upvotes: 0

Views: 1825

Answers (1)

Sachink
Sachink

Reputation: 1530

Try this

#shortcuts {
    position: absolute;
    left: 0px;
    top: 320px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform-origin: 102%;
    display: table;
}

Refer : https://jsfiddle.net/sachinkk/0drcch87/8/

Upvotes: 1

Related Questions