Display Divs One Below The Other

I have a parent div which is 100% width and 500px height. Now I want to put multiple divs of same size width:250px; height:80px one below the other and once it crosses the height

Solution 1:

You need CSS column layout. Something like this:

#parent {
    width: 100%;
    height: 500px;
    background: #eee;

    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}
#parent.box {
    width: 250px;
    height: 80px;
    background: #AAA;
    margin-bottom: 10px;
    display: inline-block;
}

Demo: http://jsfiddle.net/J8A24/

Support: browser support chart. Further reading: Multiple Columns

For IE you may want to use one of the many polyfills or leave it as is, inline-blocks will gracefully degrade for IE.

Solution 2:

Achievable with some PHP (untested):

<divstyle="width:100%;height:500px;position:relative;"><divclass="innerContainer"style="float:left;width:250px;"><divclass="innerDiv"style="height:80px;"><?phpfor($i = 1; $i < $numDivs; $i++) : ?><?phpif($i % 6 == 0) : ?><!-- create new container div --></div><divclass="innerContainer"style="float:left;width:250px;"><?phpendif; ?><!-- put stuff in child div here --><?phpendfor; ?></div></div></div>

Or you can use CSS columns as mentioned in the other answer, but I'm used to dealing with things that have to be widely supported in old browsers.