title: CSS position two columns in a div
body: <p>I have two <code>&lt;div&gt;</code> inside of a container. They act as a left and right column. The right column will vary in height, while the left column is just one image and some text. </p>
  
  <p>How can I position these correctly without using float and clearing div hacks? Use of these styles means I will need extra HTML and usually excessive CSS. </p>
  
  <p><a href="http://jsfiddle.net/yArWb/6/" rel="nofollow"><strong>jsFiddle</strong> where the columns do not behave nicely at all. They should both start at the top of the container div.</a></p>
  
  <p>I assume that you could do this with <code>display: inline-block</code>. But when I do this one of the columns usually has strange vertical positioning.</p>