CSS Float multiple left-floated elements and one right floated

Question

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.

Here's the HTML:

<ul>
  <li>
    <h3>Title</h3>
    <img src="images/image" />
    <p>This is some text.</p>
    <p>Here's some more text.</p>
    <p>And heres yet another block of text.</p>
    <blockquote>This is a quote.</blockquote>
    <a>A link</a>
  </li>
</ul>

Here's an example of how my HTML and CSS look: http://jsfiddle.net/tempertemper/MZWD9/12/

The site that I'm looking to make wider is here: http://tempertemper.net/portfolio

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.

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.

Can anyone put me right?

Thanks,

Martin.

Answer 1

With the HTML you have, this is not possible.

The flow of a document happens in HTML order. This means that, under normal circumstances, an element can only affect elements that come after it in the HTML, as far as positioning goes.

float: right, for example, will move the element to the right and any elements following it will flow around it to the left. clear: left will prevent elements from flowing to the left of the element it is applied to.

I might suggest breaking your HTML into blocks, and floating those.

You could then remove the h3, img, p selector and rule from your CSS, and replace it with a similar rule for .content

In general, I would recommend reading up on document flow, float, clear, and position. They tend to be over-used properties, and it seems you were over-using them here.

Here is the code:

        ul {
            width: 200px;
        }
        .content {
            float: left;
            width: 100px;
        }
        blockquote {
            float: right;
            width: 50px;
        }
        a {
            float: left;
            clear: both;
        }

    <ul>
      <li>
        <h3>Title</h3>
        <div class="content">
          <img src="images/image" />
          <p>This is some text.</p>
          <p>Here's some more text.</p>
          <p>And heres yet another block of text.</p>
        </div>
        <blockquote>This is a quote.</blockquote>
        <a>A link</a>
      </li>
    </ul>

Oh, and a fiddle for you: http://jsfiddle.net/2bedr/1/