Question

I have a parent div of height 100 px but full width (default).
Inside it I have a lot of 20px by 20px divs.
When the child divs are about to reach the bottom, I want the next ones to start wrapping.
That is, they should start displaying alongside to the right.
In other words I don’t want scrolling to happen. But wrapping.

<div id="parent" style="height:100px">
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   <div style="height:20px;width:20px"></div>
   ............
</div>

Answer 1

You can use CSS3 columns – http://jsfiddle.net/spbqh/

#parent {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;

    background: #eee;
}

div > div {
    height: 20px;
    width: 20px;
    background: beige;
}