title: Making a simple layout with a sidebar in HTML & CSS
body: <p>I have been trying to make a simple HTML layout with a sidebar on the left and a container at it's right. 
  The CSS Codes i wrote are these:</p>
  
  <pre><code>body{
      margin: 0;
      padding:0;
  }
  .sidebar,.content{
      background: #333;
      color: #fff;
      height: 500px;
      border-radius: 4px;
      margin: 20px;
      border:1px solid #777;
  }
  .sidebar{
      width: 300px;
      float: left;
      position: absolute;
  }
  .content{
      width: 630px;
  }
  </code></pre>
  
  <p>And the simple HTML Follows:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="sidebar"&gt; &lt;/div&gt;
  
    &lt;div class="content"&gt;  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But It doesn't seem to work though i thought using float:left solves the problem, but it seems that the right one is going on top of another.</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/1hchree0/" rel="nofollow">Click here to see the JS Fiddle</a></p>