title: Image and Div - side by side
body: <p>I would like to create a set up where there is an image on the left and and div on the right. I am using float left to accomplish this but I would like the right div to have the same height as the image on the left and for the text to be centered vertically.</p>
  
  <p>here is a <a href="http://jsfiddle.net/kLexs/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>&lt;img class="half" src="http://placekitten.com/200/300"&gt;
  &lt;section class="articlename"&gt;Gangstas Drinkin&lt;/section&gt;  
  
  ...
  
  .half{float:left;width:50%;}
  .articlename{width:50%;background-color:black;float:left;color:white;}
  </code></pre>
  
  <p>So to recap i want the cat to be 50% of the page and the other 50% to be black with the text and the right side needs to match the height of the image. </p>
  
  <p>Is this possible?</p>