Floated DIVs not flowing properly

Question

Hi everyone,

I am working on a photo gallery, each thumbnail is in its own DIV and floated to the left in a containing DIV. It has been displaying properly up until vertical thumbnails entered the equation. Now, when the next row should start, the first item of the following row is to the left of the last vertical DIV (thumbnail), rather than flush to the left of the containing DIV.

Here is the CSS:

#galleryBox {
        width: 650px;
        background: #fff;
        margin: auto;
        padding: 10px;
        text-align: center;
        overflow: auto;
    }
    .item {
        display: block;
        margin: 10px;
        padding: 20px 5px 5px 5px;
        float: left;
        background: url('/images/content_bottom.png') repeat-x scroll bottom #828282;
        }

and the HTML:

<div id="galleryBox" class="ui-corner-all">
                <div id="file" class="ui-corner-all">
                    <form name="uploadPhoto" id="uploadPhoto" method="post" action="" enctype="multipart/form-data">
                        <p><label for="photo">Photo:</label><input type="file" name="photo" id="photo"/></p>
                        <p><label for="caption">Caption: <small>Optional</small></label><input type="text" id="caption" name="caption"/></p>
                        <p align="center"><input type="submit" value="Upload" name="send" id="send" class="addButton ui-state-default ui-corner-all"/></p>
                    </form>
                    <a name="thumbs"></a>
                </div>
                <div class="item ui-corner-all">

                    <a href="http://tapp-essexvfd.org/gallery/photos/201004211802.jpg" class="lightbox" title="test1">
                        <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211802_thumb.jpg" alt="test1"/></a><br/>
                    <p><span class="label">test1</span></p>
                </div>

                <div class="item ui-corner-all">
                    <a href="http://tapp-essexvfd.org/gallery/photos/201004211803.jpg" class="lightbox" title="test3">
                        <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/201004211803_thumb.jpg" alt="test3"/></a><br/>
                    <p><span class="label">test3</span></p>
                </div>
</div>

Answer 1

Two options:

1. Set a maximum height for the thumbnail DIVs, so that they layout correctly, regardless of whether they are horizontal or vertical.
2. Use "clear: left" to reset the float on the thumbnail DIV next to the vertical.

The default behavior appears correct, based on what happens when text flows around a floated DIV. Based on what you're trying to do, I would choose option #1.

Answer 2

you could try using css table displays for your divs... ie.

#galleryBox {
    display: table;
    ...
}
.item {
    display: table-cell;
    ...
}
.row {
    display: table-row;
}

so you'd have to add another div to wrap around the items in each row

<div id="galleryBox">
    <div class="row">
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
    </div>
    <div class="row">
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
        <div class="item">image</div>
    </div>
</div>

Answer 3

You can use Inline-Blocks as described in this article:

• The Inline-Block Thumbnail Gallery

The article solves the same exact problem you are having with thumbnails.

I also found this simple example using inline-block thumbnails. Note how the thumbnails wrap nicely and remain vertically aligned within their line.

---

UPDATE:

Here is another detailed article that tackles this problem with the inline-block:

• Cross-Browser Inline-Block

As you can notice from these articles, it is a bit tricky to make it work cross-browser.