Question

I have something like:

<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

I’ve set the container to a clear fix and floated the divs inside the container, like this:

However, when I have additional text in a div, I’d like it to push the other divs down as if they were a row, like this:

Instead, because of the floats, I’m getting something more like this:

I’m just wondering as to the best way to go about this. I could put a wrapper around each “row”, like:

<div id="container">
    <div class="row">
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="row">
    <div></div>
    <div></div>
    <div></div>
    </div>
    div class="row">
    <div></div>
    <div></div>
    <div></div>
    </div>
</div>

But that seems to be a lot of extra non-semantic divs…plus if I am generating the divs dynamically (through a list-view in a cms) then I have to add extra code to count each multiple of three divs…

Answer 1

OOOh! Metro Tiles 🙂

this might be an old (3-year old) post but still explains nicely how to do the float height consistently cross-browser.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/