title: How to push other elements to the right using my sidebar?
body: <p>I want to create a simple side-navigation that takes up the entire screen's height. I am using <a href="https://milligram.github.io" rel="nofollow noreferrer">Milligram</a> for my base, and I want my side-nav to work with it. I have the following set up:</p>
  
  <p><a href="http://codepen.io/anon/pen/ZLJmzJ" rel="nofollow noreferrer">Codepen demo</a></p>
  
  <p>As you can see, my sidebar is the following element</p>
  
  <p><code>&lt;div class="sidebar"&gt;&lt;/div&gt;</code> with the following styles:</p>
  
  <pre><code> div.sidebar {
      position: absolute;
      width: 250px;
      height: 100%;
      z-index: 99;
      background-color: black;
  }
  </code></pre>
  
  <p>This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.</p>
  
  <p>How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.</p>
  
  <p>Any help is appreciated.</p>