Стыдно такое спрашивать, наверно. Но, почему красные блоки не обтекают в одну колонку зеленый? Флоаты заданы, у каждого красного clear: right.
По идеи они должны обтекать зеленый и запрещать обтекать себя справа. Не то, не другое не выполняется.
<style>
.d1 {
position: relative;
width: 200px;
height: 700px;
background-color: green;
}
.d2 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d3 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
.d4 {
clear:right;
float: left;
width: 200px;
height: 200px;
background-color: red;
border:1px solid black;
}
</style>
<body>
<div class='d1'></div><div class="d2"> </div><div class="d3"> </div><div class="d4"> </div>
</body>