Проблема с Div в CSS

Question

У меня есть множество делений, и они либо выровнены и очищены влево или вправо.Но здесь у меня странное поведение:

http://i54.tinypic.com/2hxm3wk.jpg

По сути, в верхней половине два элемента встречаются сверху и снизу, но перемещаются в разных направлениях, так что, как будто слеваверхний серый прямоугольник никогда не будет располагаться рядом или выше правого верхнего серого прямоугольника, только точно под ним.

Та же ситуация, но в нижней части наоборот.

Любая помощь?

Answer 1

Может ли быть так, что объединенная ширина двух плавающих элементов в строке больше, чем ширина их контейнера ( вам нужно учитывать ширину + отступы + поля + границы ... )?

Этот пример работает 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>

с

#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;}