I need some help getting my head around this. Each of the brackets represents a paragraph, and the number their order in the source code. I want to make a quasi 2 column layout from the paragraphs without actually having two full columns, so I can be flexible with the order. The left ones have a % width, and so do the right ones, and for now I am achieving this by floating the ones on the right to the right. The thing is I want the tops of the paragraphs that are side by side to line up. However, I realized that if [1] is taller than [2], then [3] not go under [1], because [4]'s position has nothing to do with [1] (it won't be pushed down automatically).

Is there a smarter way of doing this layout that doesn't require additional styling on the containing element (except for maybe position), or wrapping a DIV around 2 paragraphs that I want to be next to eachother and doing clear:right?

dresden_phoenix
—
2013-03-18T21:30:11Z —
#2

Am assuming that as long as the TOPS between pairs align you are content ( keep in mind some white space at the bottom will need to happen for this to occur anyway) and that you container hold only Ps ( or at least the last element is a P) you could just do this:

Floating the items right would put them in the order you want (2,1,4,3...) almost, as the last P will then go on the right, thus we target the last:child float it left. This works consistently even if you were to have an even # of Ps.