Floated DIVs not flowing properly

Posted by NightMICU on Stack Overflow See other posts from Stack Overflow or by NightMICU
Published on 2010-04-21T23:19:05Z Indexed on 2010/04/21 23:23 UTC
Read the original article Hit count: 279

Filed under:
|

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.

alt text

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>

© Stack Overflow or respective owner

Related posts about css

Related posts about html