title: Float left/right makes gap on window resize
body: <p>On my site I have three divs, one header, one main content and a sidebar on the right side.
  The sidebar is the actual problem. I want that the sidebar always sticks to the right side of the browser window and if the user resizes the window so that the width is lower than the main and sidebar, the sidebar stops at the left edge of the main content.</p>
  
  <p>When the user first access the webpage and press the "green, maximize window button" on a Mac atleast, the window should resize so that the main content and sidebar are placed edge to edge with no gap.</p>
  
  <p>With my code everything works fine except that when I resize the window to the smallest width possible and then press the maximize window button, there is a 16px gap between the two divs.</p>
  
  <p>My code:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="header"&gt;Header&lt;/div&gt;
      &lt;div id="container"&gt;        
          &lt;div id="main"&gt;
          &lt;p&gt; Left &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="sidebar"&gt;
          &lt;p&gt; Right &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>body{
  margin:0 0;
  min-width:606px;
  }
  
  #header {
      padding:5px 10px;
      background:#00FF00;
      height:100px;
  }
  
  #container{
      min-width: 865px;
      min-height: 50px;
  }
  
  #main {
      float:left;
      min-width: 622px;
      background:#FF0000;
  }
  
  #sidebar {
      float:right;
      width:243px;
      min-height: 50px;
      background:#0000FF;
      margin-bottom: -20px;
  }
  </code></pre>