title: Basic CSS: Float left and inline divs
body: <p>I've <a href="http://screencast.com/t/m9754etFU" rel="nofollow">captured an illustration of a CSS two-column layout I've set up</a>, while using the following rule for the orange containers:</p>
  
  <pre class="lang-css prettyprint-override"><code>.embedded_post{
      float: left;
      width: 46%;
      margin-right: 20px;
      padding: 10px;
      display: inline-block;
  }
  </code></pre>
  
  <p>As can be seen, the second orange container on the right column is preventing the second orange container on the left column from floating up to the top left box. </p>
  
  <p>This happens apparently since <code>float:left</code> automatically grants the element with a block level flow. </p>
  
  <p>How can I get the second box on the left column to be positioned under the first one?</p>