CSS float multiple left elements and one right floating

Question

I have problems with floats. I play with a site that I want to respond a bit using media queries for different browser widths. When it sits, the page is displayed with an HTML stream, but when the browser expands, I want the blockquote to end to the right of img, but it only wraps up to the p element directly in front of it.

Here's the HTML:

<ul> <li> <h3>Title</h3> <img src="images/image" /> <p>This is some text.</p> <p>Here 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 is an example of what my HTML and CSS look like: http://jsfiddle.net/tempertemper/MZWD9/12/

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

I am sure that I am missing something obvious, but I can not understand what it is, and I begin to wonder if only two adjacent elements float. I suppose I could place the div around the img and p tags, but I want my HTML to be nice and clean.

All elements have a width and the block definitely fits into the contained element (i.e., the width li is sufficient to contain all elements and their indents, borders, fields, etc.). I tried to float all the remaining elements, block the blockquote, which I placed correctly. Tried to use clear: left for elements preceding a block quote. There is no joy.

Can anyone call me right?

Thanks,

Martin.

Answer 1

With the HTML you have, this is not possible.

The flow of the document is in HTML order. This means that under normal circumstances, an element can only affect elements that appear after it in HTML as much as possible.

float: right , for example, will move an element to the right, and all elements following it will pass around it to the left. clear: left will not allow elements to flow to the left of the element to which it is applied.

I could suggest breaking your HTML into blocks and float:

 <ul> <li> <h3>Title</h3> <div class="content"> <img src="images/image" /> <p>This is some text.</p> <p>Here 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> 

Then you can remove the selector and the h3, img, p rule from your CSS and replace it with a similar rule for .content

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

In general, I would recommend reading through the flow of a document, float , clear and position . They are generally overused properties, and it looks like you used them here.

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

Answer 2

The solution is pretty simple. Even easier than you thought.

the change:

 <ul> <li> <h3>Title</h3> <img src="images/image" /> <p>This is some text.</p> <p>Here 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> 

For this:

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

Pointing first at a block (first, and swim to the right), you will first TELL the element to swim to the right. I know this is not logical, but this is the correct answer ... If it were many times.

Answer 3

You can move all remaining elements to align them horizontally. Check out this example .

You can also assign a width to <ul> and place the last element to the right so that it remains valid regardless of the width of the parent element. Another example .

If it helps me more, I will update :)

After your comments, you should revise the HTML structure to have a blockquote immediately after img or title. Then he will behave as you wish. An example .