title: Aligning two divs side-by-side
body: <p>I have a small problem. I am trying to align two divs side by side using CSS, however, I would like the center div to be positioned horizontally central in the page, I achieved this by using:</p>
  
  <pre><code>#page-wrap { margin 0 auto; }
  </code></pre>
  
  <p>That's worked fine. The second div I would like positioned to the left side of the central page wrap but I can't manage to do this using floats although I'm sure it is possible.</p>
  
  <p>I would like to push the red div up alongside the white div.</p>
  
  <p>Here is my current CSS concerning these two divs, sidebar being the red div and page-wrap being the white div:</p>
  
  <pre><code>#sidebar {
      width: 200px;
      height: 400px;
      background: red;
      float: left;
  }
  
  #page-wrap {
      margin: 0 auto;
      width: 600px;
      background: #ffffff;
      height: 400px;
  }
  </code></pre>