0

It seems to me that we get a totally different behavior when floating 2 divs instead of one. In this example http://jsfiddle.net/nwZC3/2/ the left-sidebar floats inside the main div.

<div class="left-sidebar" style="float:left; width:10%;"></div>
<div class="main" style="width:70%;"></div>

But in this one http://jsfiddle.net/m77na/9/ the main div, which this time has float:left style does not float inside the right-sidebar, the difference being that we also have another floating div in the layout.

<div class="left-sidebar" style="float:left;width:10%;"></div>
<div class="main" style="width:70%;float:left"></div>
<div class="right-sidebar" style="width:20%;"></div>

I tried to find a floating rule in the spec (w3c visual formatting model) to explain this behavior but I didn't find any.

coss
  • 1
  • 1
  • 1
    Learn how [floats](http://stackoverflow.com/questions/16568272/how-css-float-works-why-height-of-the-container-element-doesnt-increase-if-it/16568504#16568504) work – Mr. Alien Jan 25 '14 at 11:32
  • Also, I see no difference in both of your examples – Mr. Alien Jan 25 '14 at 11:34
  • I have corrected the post with the correct link to the second example. Now they are different. – coss Jan 25 '14 at 16:44

1 Answers1

1

When you float only .left-sidebar, what happens is that it floats against the content of .main only. The .main element itself is positioned as if .left-sidebar were not there at all — that is, .left-sidebar has been taken out of the normal flow that .main participates in.

When you float both elements, what happens is that .left-sidebar floats against .main itself. The result is that the two boxes stack against each other side by side. The .main element is positioned following the float of .left-sidebar because both of them are floating. The content within .main is unaffected by the .left-sidebar float.

Section 9.5.1 of the spec has very concise descriptions of the float property and its values. Specifically,

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

It also specifies in detail how exactly floats should interact with other content and other floats. There are several rules but only the second one applies to your example (it basically means "left-floating boxes must stack against one another, if not horizontally then vertically"):

Here are the precise rules that govern the behavior of floats:

  1. ...
  2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
  3. ...
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I understand what you are saying but maybe I was not clear about what seems odd. It was the fact that in the second example the right-sidebar content does not flow along the right border of the main div. However I discovered by mistake what was the cause when I put a width on right-sidebar bigger than the sum of left and main and noticed that indeed its content flows aside main. So what I missed was that right-sidebar, not being floated, has its left edge aligned with the left edge of left-sidebar so when the width is less than the width of main+left it will not flow aside main. – coss Jan 25 '14 at 16:58