How to make sure that all <div>s with float:right; actually float right?

Question

I have a div containing a number of inner divs with varying heights in order to create a two-column output similar to Facebook timeline, kind of like this:

<div style="width:600px">
<div class="boxsample" style="float:right;width=50%;">Content-right-1</div>
<div class="boxsample" style="float:left;width=50%;">Content-left-1</div>
<div class="boxsample" style="float:left;width=50%;">Content-left-2</div>
<div class="boxsample" style="float:right;width=50%;">Content-right-3</div>
</div>

The problem is that whenever the last left div is higher than the last right div, the next div always floats to the left of the last right one like this: http://postimage.org/image/fi5ndamk5/ It appears to treat the hanging div on the right as a constraint that makes is float to the left of it.

How do I ensure that the float:right divs always actually float right? (I am doing a while loop to fetch the content from a database, and I want to to specify the column the div belongs to just by using float, kind of like in Facebook timeline.)

Answer 1

You can use clear: right with the float: right divs and clear: left with the float: left divs. See this JSFiddle for reference.

Answer 2

If you are looking for a smart solution, try to have a look at;

Facebook Timeline Design using JQuery and CSS

and

Create Facebook Timeline Using HTML and CSS Only

Hope this helps.