Floated divs are overlapping?

[Mowaffak]

Currently, one div is floated - my question is why are two divs overlapping even if the dimensions are set in every one of them? How can I fix this?HTML:\[code\] <div class="wrapper"> <div class="block1"> </div> <div class="block2"> </div> </div>\[/code\]My CSS:\[code\].wrapper {border:black solid;width:500px;height:1000px}.block1 {width:300px;height:300px;float:right;border:solid red;}.block2 {width:300px;height:300px;border:solid green;}\[/code\]jsfiddle here - http://jsfiddle.net/FLwUA/1/