Floating divs do not flow properly

Question

I am working on a photo gallery, each thumbnail is in its own DIV and floats to the left in the containing DIV. It displays correctly until vertical thumbnails fit into the equation. Now, when the next line should begin, the first element of the next line is to the left of the last vertical DIV (thumbnail), and is not reset to the left of the containing DIV.

alt text http://tapp-essexvfd.org/images/capture1.jpg

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 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

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

• Inline-Block Thumbnail Gallery

The article solves the same problem as you have with the thumbnails.

I also found this simple example using inline-block thumbnails . Pay attention to how the thumbnails are wrapped beautifully and remain vertically aligned within their line.

---

UPDATE:

Here is another detailed article on this issue with the inline block:

• Cross browser inline unit

As you can see from these articles, it’s a bit difficult to make cross-browser work.

Answer 2

Two options:

• Set the maximum height for DIV thumbnail files so that they display correctly, regardless of whether they are horizontal or vertical.
• Use "clear: left" to reset the float on the DIV thumbnail next to the vertical.

The default behavior is displayed correctly based on what happens when the text moves around a floating DIV. Based on what you are trying to do, I would choose option number 1.

Answer 3

you can try using css tables for your divs ... that is.

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

so you need to add another div to wrap the elements 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>