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

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: ul> Title This is some text. Here's some more text.

And heres yet another block of text. This is a quote. A link Content { float: left; width: 100px; } blockquote { float: right; width: 50px; } a { float: left; clear: both; } 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 Oh, and a fiddle for you: jsfiddle.net/2bedr/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: Title This is some text.

Here's some more text. And heres yet another block of text. This is a quote.

A link You could then remove the h3, img, p selector and 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 up on document flow, float, clear, and position.

They tend to be over-used properties, and it seems you were over-using them here. Oh, and a fiddle for you: http://jsfiddle.net/2bedr/1.

Do note that, while this alters the HTML, it does not alter the order of the elements, so your multiple-use cases should be preserved. – Ryan Kinal Aug 30 at 15:38 Thanks Ryan- I feared it'd be an extra div/section! – Martin Aug 31 at 8:08.

You can float all of your elements left to line them all up horizontally. Check this example. You can also give the 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.

Thanks for your help. I've had a look and it's not doing what I'm after. I've uploaded an example to jsfiddle for you to have a look at: link – Martin Aug 30 at 13:59 I'd like the "this is a quote" text to sit at the top right, next to Title or the image... Thanks – Martin Aug 30 at 14:01 Just to make sure I've understood correctly, you want the blockquote to be next to the img when the site is wider?

– Kyle Sevenoaks Aug 30 at 14:03 that's right, yep. So that it reads as a column down the right hand side of the whole li – Martin Aug 30 at 14:05 I don't want to alter the HTML if possible as it'll be dual purpose. Triple purpose once I get round to making a smartphone version.

– Martin Aug 30 at 14:11.

The solution is quite simple. Even more simple then you thought. Change: Title This is some text.

Here's some more text. And heres yet another block of text. This is a quote.

A link To this: Title This is a quote. This is some text. Here's some more text.

And heres yet another block of text. A link 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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.