CSS Float and Clear

Question

I have 3 divs, and I'm trying to position them the same way:

[1][1][2][2]
[1][1][3]

I use float: left for all divs and clear: right for [2] div, but the result is:

[1][1][2][2][3]
[1][1]

What am I doing wrong?

http://jsfiddle.net/3y3k0/v2jaC/1/

Answer 1

Please find the answer here, http://jsfiddle.net/9mx7K/19/

<div style="float:left;">[1]</div>
<div style="float:left;">[1]</div>
<div style="float:left;">[2]</div>
<div style="float:left;">[2]</div>
<div style="float:left;clear:both;">[1]</div>
<div style="float:left;">[1]</div>
<div style="float:left;">[3]</div>

Answer 2

What's wrong:

You can't use clear like that.

You need to clear the direction the float is going.

If it's floating left then you need to clear the left side and vice versa.

Solution

Use a .clear class.

(HTML):

<div class="float">1</div>
<div class="float">1</div>
<div class="float">2</div>
<div class="float">2</div>
<div class="float clear">1</div>
<div class="float">1</div>
<div class="float">3</div>

(CSS):

.float { float: left; } /* Or float: right; */

.clear { clear: left; } /* Or clear: right; */

Demo

Here's a live example

Answer 3

I have a working example here http://jsfiddle.net/uKDNm/

The key to is to group divs 2 and 3 in another <div> element that must also have the float:left styling applied, that way divs 2 and 3 span vertically across div 1:

<div id="one">One</div>
<div id="col2">
   <div id="two">Two</div>
   <div id="three">Three<div>
</div>

Answer 4

use <div style="clear:both"></div> to force-break a row

>> [1][1][2][2][clear:both][1][1][3]