2 columns of *multiple* floated DIVs causing left side to shift down

To put it simply, I have multiple right floated DIVs followed by multiple left floated DIVs. I want each side to form a column.
When I try to do this, the left "column" of DIVs is vertically shifted down as if the right-side DIVs are pushing them down with an invisible space (even though there is plenty of space between left and right columns). I have tried specifying width, height, padding, and margin to no avail.

This only occurs if I put multiple (2+) right floated DIVs before a left floated DIV. If I alternate between left & right, no vertical shifting occurs.

Here is a simplified example:

<html>
<head>
<style type="text/css">
.left {
float: left;
clear: left;
border: 1px solid black;
padding: 5px;
margin: 0;
}
.right {
float: right;
clear: right;
border: 1px solid red;
padding: 5px;
margin: 0;
}

</style>
</head>
<body>

<div class="right">RIGHT</div>
<div class="right">RIGHT</div>
<div class="right">RIGHT</div>
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="left">LEFT</div>
<div class="left">LEFT</div>
<div class="left">LEFT</div>

</body>
</html>

PLEASE NOTE: While I have worked around this problem by using a different approach, I would love to know why the problem occurred in the first place. (The new approach I used was just to use a single right floated wrapper DIV to contain non-floated DIVs, thereby forming the right column. Meanwhile, the left column was formed with just non-floated DIVs.)

Thank you for your time.

2 columns of multiple floated DIVs causing left side to shift down

Stack of right floated divs cause left floated divs to shift down - Why?

kevin007

kevin007

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week