title: How do I float two elements of different widths to the left of one large block of text?
body: <p>I have a blog article that contains three elements: 1) the post thumbnail, 2) a social media box, and 3) the article text. I want the text to float to the left of the thumbnail (easy enough) and I also want the text to float to the left of the social media box with the social media box displaying underneath the thumbnail. Another way of saying it is, I want the thumbnail to be above the social media box, but have the article text float to the left of them both. The problem is, the thumbnail is wider than the social media box, and there is a large gap to the right of the social media box to make up for the width of the thumbnail. How can I get the text to float to the left of both elements and fit snug up against both elements?</p>
  
  <p>My code is available <a href="http://jsfiddle.net/Uvcac/" rel="nofollow">in jsFiddle</a></p>