Could you help me understand this strange float issue?

Question

I am trying to learn html/css and now I am stuck trying to understand how float works.

I have the following issue: When the red div is aligned to right, the layout is how I intended to be. However, when I am aligning it to left the brown div goes to bottom.

Can someone explain why this happens?

I have an example set up at jsfiddle

<div id="container" style="width:300px;height="300px";float:right">
<div id="yellow" style="background-color:yellow;height:200px;width:100px;float:left;">yellow</div>
<div id="green" style="background-color:green;height:100px;width:100px;float:left;">green</div>
<div id="red" style="background-color:red;height:200px;width:100px;float:right;">red</div>
<div id="brown" style="background-color:brown;height:100px;width:100px;float:left;">brown</div>
</div>

Answer 1

Good way to explain behaviour of brown div from your jsfiddle http://jsfiddle.net/luisse/uX42F/ (which is grey in my example for some unknown reason =) ) is to draw it :)

Draw 1 and 2

Imagine that last floated left element on the right side creates imagine line, you cannot place any left floated element below that line (well you can if you play with margins and positions but we are focusing on floats only).

Ok we are missing something between draw 2 and draw 3, if div 2 and 3 were same height div 4 would be sitting on the top of div 2 :)

(right floated divs are placed from right to left and last div on the left sets "imagine line"... its like this example watched in the mirror :P )

Draw 3

When div 3 is shorter than div 2, div 4 sits on top of it and now div 4 is the element which sets "our imagine" line where 5 div is placed now.

Draw 4

What happening we set float right on div 3?

Div 3 is not last floated left element, now line is set by div 2 that's why grey div sits on the top od div 2

Situation gets more complicated when we mix left and right floated divs, but it is good practice to play with it.

To avoid this sort of behaviour,it is good to create 3 columns first and place divs inside them, it will make your life easier especially if you have more "small boxes".

<div class="column">
    <div class="box">1</div>
    <div class="box">2</div>
</div>

<div class="column">
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

<div class="column">
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

http://jsfiddle.net/uX42F/5/

Hope it will help.

Answer 2

So I think what will help clear up any confusion is taking a look at what is actually happening here. When you set a group of elements to float: left; or float: right; you can think of it as putting them into two different groups. Each group stacks in order to the left or right, if one hits the edge of their containing div it will wrap down to the next line as normal.

In your first example with the red div was floated right, so it's in it's own group now and doesn't interact with the remaining floated left elements. That leaves the brown div to hit the container's edge, and wrap under the green element. If we expand the container you'll see it doesn't wrap and sits next to the green.

In the second example the red div is now part of the group. it's placed next to the green and then the brown wraps down below as in your example. Again if we expand the containing div it will sit next to the red block now.

EXAMPLE FIDDLE DEMO