Plot packaging of floating div vertically

[magpie]

The normal div floating shall be built in with the height of the highest element. There you go.

Google+'s making the plugs more compact and beautiful. There you go.

How can the blocks be lifted up tighter than filling space? Preferably, without dynamic reading of the boundaries of each element and absolute positioning.

[derk]

It's worth thinking either of the same size of the blocks in height or of breaking into a few columns and filling them with blocks, but one to the left, the other to the right... Probably in three columns on the 2nd squeak. ♪ ♪ It's also possible to use the Margin Collaps properties and put down the bottom of the blocks... (but it's at a small distance of height.) ♪ ♪ )

About the poles version:

#wrapper{
 width:770px;
 outline:1px solid #9F00BF;
}
#cols1{
 width:250px;
 float:left;
 margin:0;
}
#cols2{
 width:250px;
 margin: 5px  260px;
}
#cols3{
 width:250px;
 float:right;
 margin:0;
}
.a4{

width:245px;

height:150px;

background:#66f;

margin:5px;

}

.a5{

width:245px;

height:100px;

background:#66f;

margin:5px;

}

.a6{

width:245px;

height:150px;

background:#66f;

margin:5px;

}

.a7{

width:245px;

height:125px;

background:#66f;

margin:5px;

}

<div id="wrapper">

<div id="cols1">

<div class="a4"></div>

<div class="a6"></div>

<div class="a5"></div>

<div class="a7"></div>

</div>

<div id="cols3">

<div class="a5"></div>

<div class="a4"></div>

<div class="a6"></div>

<div class="a7"></div>

</div>

<div id="cols2">

<div class="a4"></div>

<div class="a7"></div>

<div class="a6"></div>

<div class="a5"></div>

</div>

</div>