title: Position:Sticky Sidebar in Internet Explorer
body: <p>I am having issues with a sticky left sidebar in Internet Explorer 11. My current solution is working in Chrome and Firefox. I've attempted to make use of a CSS Polyfill, <a href="https://github.com/filamentgroup/fixed-sticky" rel="nofollow noreferrer">fixed-sticky</a>, but still had problems with formatting- the content to the right of the sidebar is jumping to the left and overlapping with the sidebar when the position becomes fixed. Thanks for your ideas. This is what the code looks like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.contentWithSidebar-wrapper {
    display: table;
    height: 100vh;
  }
  
  .content-wrapper {
    padding-left: 10px;
    display: table-cell;
    width: 100%;
    vertical-align: top;
  }
  
  .sidebar-wrapper {
    position: relative;
    display: table-cell;
    vertical-align: top;
  }
  
  .sidebar-wrapper .sidebar {
    position: sticky;
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div class="contentWithSidebar-wrapper"&gt;
      &lt;div class="sidebar-wrapper"&gt;
        &lt;div class="sidebar"&gt;
          Sidebar content
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="content-wrapper"&gt;
        &lt;div class="container-fluid"&gt;
          Page content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>