css - CSS - div - clear:none と float の左右両方

Question

これが私の例です： http://jsfiddle.net/pQ63V/2/

#div1 {
    background-color:red;
    width:300px;
    height:100px;
    float:left;
    clear:none;
}
#div2 {
    background-color:green;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}
#div3 {
    background-color:blue;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}
#div4 {
    background-color:cyan;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}
#div5 {
    background-color:magenta;
    width:300px;
    height:100px;
    float:left;
    clear:none;
}
#div6 {
    background-color:yellow;
    width:300px;
    height:50px;
    float:left;
    clear:none;
}

私が実際に編集しようとしているウェブサイトのスニペットは次の とおりです: http://www.luminance.co.uk/testing/右側の div では、左側にフロートすることはできません

高さの異なる div があり、大きい div の左側と大きい div の右側にフロートできるようにしたいと考えています。

例でわかるように、黄色の div は右側の div と一緒に表示されません (css が float:left; であるため)。

"float:both;" する方法はありますか? ?

ありがとう！