title: CSS Float multiple left-floated elements and one right floated
body: <p>I'm having a bit of trouble with floats. I'm playing with a site that I want to make a bit responsive using media queries for varying browser widths. As it sits, the page displays with the flow of the HTML, but when the browser is widened, I want the blockquote to wrap up onto the right of the img, but it only wraps as far as the p element immediately before it.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;h3&gt;Title&lt;/h3&gt;
      &lt;img src="images/image" /&gt;
      &lt;p&gt;This is some text.&lt;/p&gt;
      &lt;p&gt;Here's some more text.&lt;/p&gt;
      &lt;p&gt;And heres yet another block of text.&lt;/p&gt;
      &lt;blockquote&gt;This is a quote.&lt;/blockquote&gt;
      &lt;a&gt;A link&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's an example of how my HTML and CSS look: <a href="http://jsfiddle.net/tempertemper/MZWD9/12/" rel="nofollow">http://jsfiddle.net/tempertemper/MZWD9/12/</a></p>
  
  <p>The site that I'm looking to make wider is here: <a href="http://tempertemper.net/portfolio" rel="nofollow">http://tempertemper.net/portfolio</a></p>
  
  <p>I'm sure I'm missing something obvious but I can't work out what it is and I'm starting to wonder if float only floats two adjacent elements. I suppose I could put a div around the img and p tags, but I want to keep my HTML nice and clean.</p>
  
  <p>All elements have a width and the blockquote definitely fits in the containing element (ie. the width of the li is sufficient to contain all of the elements and their padding, borders, margins, etc.). I've tried floating all of the elements left, bar the blockquote which I've floated right. Tried using clear:left for the elements preceding the block quote. No joy.</p>
  
  <p>Can anyone put me right?</p>
  
  <p>Thanks,</p>
  
  <p>Martin.</p>