I have infinite number of divs of a 100px width, which can fit into a 250px width parent. Regardless of height, I need the divs to be displayed in rows, as shown in the image. I've tried resolving this, but the div height seems to be screwing it up.
I'd really appreciate your help. Thanks :)
border:1px dotted blue;
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
To my knowledge, there's no way to fix this problem with pure CSS (that works in all common browsers):
display: inline-blockdoesn't work.
position: absoluterequires manual pixel tuning. If you're using a server-side language, and you're working with images (or something with predictable height), you can handle the pixel tuning "automatically" with server-side code.
Instead, use jQuery Masonry.