How to make sure that all <div>s with float:right; actually float right?
-
25-06-2021 - |
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.)
Solution
You can use clear: right
with the float: right
divs and clear: left
with the float: left
divs. See this JSFiddle for reference.
OTHER TIPS
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.