title: Sidebar (float: left) not always floating left
body: <p>I currently made a container to contain sidebars and content, but when I add more text to the sidebar than to the container the second sidebar floats a bit to the side. These are the code's I'm using.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="sidebar"&gt;
          Placeholder
          &lt;br&gt;&lt;hr&gt;
          Test
      &lt;/div&gt;
      &lt;div class="content"&gt;Placeholder&lt;/div&gt;
      &lt;br&gt;
      &lt;div class="sidebar"&gt;Placeholder&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.sidebar {
    width: 222px;
    height: auto;
    background-color: #E9E9E9;
    border-radius: 5px;
    border: 1px solid #7F7F7F;
    box-shadow: inset 0px 1px 0px #FDFDFD;
    box-shadow: 0px 1px 0px #949494;
    margin-right: 20px;
    padding: 5px;
    float: left;
    text-align: left;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
  }
  .content {
    width: 666px;
    height: auto;
    background-color: #E9E9E9;
    border-radius: 5px;
    border: 1px solid #7F7F7F;
    box-shadow: inset 0px 1px 0px #FDFDFD;
    box-shadow: 0px 1px 0px #949494;
    padding: 5px;
    float: right;
    text-align: left;
    display: inline-block;
    margin: auto;
    margin-top: 10px;
  }
  .container {
    width: 932px;
    text-align: center;
    margin: auto;
  }
  </code></pre>