I tried

<div style="clear:both"></div>

But it did not work.

Here's my code

<div style="float:left;width:50%">One</div>
<div style="float:left;width:50%">Two</div>
<div style="clear:both"></div>
<div style="margin: 20px 0px 0px 0px">I am 20px below Two</div>


I expect an output like this:


One Two



I am 20px below Two



The above code works in Firefox and IE 6. But in Opera, the output is like this:


One Two
I am 20px below Two


Opera does not obey the margin code. Anyone knows any code that works in all 3 browsers? Curse opera! :mad:

I would recommend using the "clearfix" technique:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

It is used by containing the floats like this:


<div class="clearfix">
<div style="float:left;width:50%">One</div>
<div style="float:left;width:50%">Two</div>
</div>
<div style="margin: 20px 0px 0px 0px; clear:both;">I am 20px below Two</div>


The clearfix technique you can learn more about here: http://csscreator.com/attributes/containedfloat.php
It is really the best way to handle floats in most browsers (Even Mac IE :D )