Search code examples
javascriptcsshtmlfill

Fill in Space Horizontally and Vertically With Divs

I'm looking for a way to automatically fill in a div with width x1 and height y1 with other div elements, each with width x2 and height y2

So the html would look like:

<div class="parentdiv">
    <div class="subdiv"></div>
    <div class="subdiv"></div>
    <div class="subdiv"></div>
    ...
</div>

The subdivs are appended dynamically, based on how many are needed to display all the information. I want them to fill up the space in the parentdiv horizontally and then move to the next row when they hit the edge.

Right now they just stack below one another vertically and there is a lot of wasted space. Is there a cross-browser solution for this?

Solution 
  • <style type="text/css">
    .parentdiv .subdiv { display: inline-block; }
</style>

    Note that IE7 has problems with div's going inline, so you may need to make those subdivs, subspans (still using inline-block);

    Or Brian's solution of float:left;