It is easy to arrange DIVs horizontally with float. For example:
<div style="width: 500px;">
<div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
<div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
<div style="float:left; width: 140px; height: 240px; background-color:Green;"></div>
<div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
<div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div>
</div>
This will produce:
But how to arrange the DIVs both horizontally and vertically? In this case, how to shift the Red and Purple DIVs upper where there is empty space (under Yellow and Blue DIVs)?
NOTE: This is just an example, and I wish to find a method to make the arrangement for any set of DIVs (not only this typical example).
See Question&Answers more detail:os