Here is the code snippet I'm having trouble with:
html:
<div class="left">left</div>
<div class="left">left</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="right">right</div>
<div class="right">right</div>
css:
.left{
float: left;
clear: left;
border: 1px solid blue;
}
.right{
float: right;
clear: right;
border: 1px solid red;
}
jsfiddle: https://jsfiddle.net/839okvsb/4/
The left divs are positioned correctly, but the right ones start after the second div instead of aligning on top.
What could be causing this issue, and how can it be fixed? This problem has me really puzzled.
Note: Combining all left divs into one large div is not an option because they need to be separate (depending on the width required).
Update: Even mixing them up as shown here: https://jsfiddle.net/839okvsb/5/ does not resolve the issue.
Additional Update: Packing them all into a single div is not feasible as they need to have the flexibility demonstrated here: https://jsfiddle.net/839okvsb/8/ when necessary.