Trouble with Divs in CSS

I have a load of divs, and they're either aligned and cleared left or right. But I have some odd behavior here:

Basically, on the top half, two divs meet at their top and bottom, but floated different directions, so it's as if the left top grey box wil开发者_开发知识库l never be side-by-side or above the right top grey box, only exactly below it.

Same situation but reversed on the bottom.

Any help?

could it be that the combined width of the two floated elements per line are bigger than the width of their container (you need to factor in the widths + paddings + margins + borders..)?

This example works http://jsfiddle.net/gaby/mLa7K/

<div id="container">
    <div class="box left short">top left</div>
    <div class="box right short">top right</div>
    <br class="clear" />
    <div class="box left long">bottom left</div>
    <div class="box right long">bottom right</div>
</div>

with

#container{
    width:400px;
    border:1px solid red;
    overflow:auto;
}
.left{
    float:left;
}
.right{
    float:right;
}
.box{
    width:140px;
    border:1px solid green;
}
.clear{
    clear:both;
    margin:30px 0;
}
.short{height:30px}
.long{height:130px;}