title: 2 Sidebars - one on each side of content
body: <p>I know this is a commonly answered question, but for some reason nothing I've tried has worked from the other Stackoverflow posts. I'm trying to have two sidebars on my website with one on each side of the main content. </p>
  
  <p>I've tried using float right and float left. Block vs. inline-block etc... I'm not sure whether the the main contents should float or not. I'm using the latest google chrome browser.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Main Page Contents --&gt;
  &lt;div id="contents"&gt;
      &lt;div id="sidebar"&gt;
          &lt;a href="link1.php"&gt;&lt;div&gt;&lt;p&gt;link 1&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
     &lt;/div&gt;
  
      &lt;div id="sidebar2"&gt;
          &lt;a href="link2.php"&gt;&lt;div&gt;&lt;p&gt;link 2&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="mainContents"&gt; 
          &lt;div class="center-div" style="width: 700px;"&gt;
              &lt;h1"&gt;This is some content&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="center-div" style="width: 900px;"&gt;
              &lt;h1&gt;More content&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .center-div
   {
   margin: 0 auto;
   padding: 15px;
   background-color: red;
  
   }
  
  
  
  #contents {
  overflow: auto;
  margin: auto;
  margin-bottom: 10px;
  width: 100%;
  }
  
  #sidebar {
  position: fixed;
  float: left;
  width: 200;
  margin: 5px;
  margin-left: 15px;
  padding: 5px;
  top: 46px;
  margin-top: 20px;
  
  }
  
  #sidebar2 {
  position: fixed;
  float: right;
  width: 50px;
  margin: 5px;
  padding: 5px;
  top: 46px;
  margin-top: 20px;
  }
  
  #mainContents {
      float: right;
      width: calc(100% - 300px);
      margin: 0px;
      padding: 5px;
      padding-top: 20px;
  }
  </code></pre>
  
  <p>Both the sidebars appear on the left side in the same position. The best I've gotten is the sidebar2 floats right of the sidebar and the contents float right of that.</p>