Home/ Questions/Q 7058713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:08:44+00:00

It seems that clear: right causes also clear: left for all consecutive floats! See

  • 0

It seems that clear: right causes also clear: left for all consecutive floats! See
http://jsfiddle.net/Mx7zu/11/ or this code:

<html>
<head>
<style>
div { margin: 16px; width: 200px; height: 130px; border: solid red 1px; }
#right1 { float: right; }
#right2 { float: right; clear: right; }
#left1, #left2 { float: left; }
</style>
</head>
<body>
<div id="right1">Right 1</div>
<div id="right2">Right 2</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
</body>
</html>

I would expect the divs left1 and left2 to be at the top, at the same level as right1! This only happens when I place the div with clear: right (right2) as the last one:

<div id="right1">Right 1</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
<div id="right2">Right 2</div>

Can you please explain this strange behaviour? Thanks in advance! Tested in FF 9.0.1.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Think of the browser as, by default, laying out the page from left to right and top to bottom.

    Initially the starting point for content is at the top, left hand side.

    The float:right of #right1 shrink wraps the div and moves it to the right side. The space to the left of it is available for other content.

    The float:right of #right2 shrink wraps the div and attempts to moves it to the right side as well. But the clear:right stops it from going next to the #right1 div. So the starting point for content to be placed is moved down until the #right2 div can be successfully placed. It’s then placed on the right.

    The #left1 div is then placed. The float:left shrink wraps the div and attempts to place it at the starting point for content which is now directly to the left of #right2. Since the space to the left of #right2 is large enough to contain #left1, that’s where #left1 is placed.

    Similarly, the space to the left of #right2 and to the right of #left1 is large enough to accommodate #left2, that’s where #left2 is placed.

    • 0