CSS Float multiple left-floated elements and one right floated - css

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/

Answer 2

The solution is quite simple. Even more simple then you thought.
change:
<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>
To this:
<ul>
<li>
<h3>Title</h3>
<blockquote>This is a quote.</blockquote>
<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>
<a>A link</a>
</li>
</ul>
By stating the blockquote first (and float it right) you first TELL the element to float right. I know this is not logical, but it is the right answer... Had this multiple times myself.

Answer 3

You can float all of your elements left to line them all up horizontally. Check this example.
You can also give the <ul> a width and float the last element right so it will remain right no matter the width of the parent element. Another example.
If there's more I can help with, I will update :)
After your comments, you should revise the HTML structure to have the blockquote directly after the img or title. Then it will behave as you wish. Example.