Extra white space at bottom of div; overflow:hidden helps, but causes another issue

Question

I'm working on a photography portfolio site that utilizes column-count to create a 3x3 grid of pictures (for most resolutions). My div setup is the following:

<div id="photo-container">
    <div class="photo">
       <img src="photo1.jpg" />
       <div class="caption">Caption1 here</div>
    </div>
    <div class="photo">
       <img src="photo2.jpg" />
       <div class="caption">Caption2 here</div>
    </div>
    ... and so on until photo9
</div>

Here's the css for the divs, minus my header and footer:

#photo-container {
    position: relative;
    float: left;
    width: 100%;
    clear: left;
    max-width: 1902px;
    -webkit-column-rule-width: 0px;
    -webkit-align-content: left;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
}

.photo {
    position: relative;
    float: left;
    line-height: 0px; /* to get rid of vertical gaps between rows */
}

.caption {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 75px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
}

The problem is that I'm left with a large white space after the last row of pictures. Inspecting the element in Chrome shows that it's part of the photo-container div. Here's what this looks like:

white space in photo-container div

Adding overflow:hidden to the photo divs gets rid of the white space; however, the caption divs for the middle and right columns become hidden:

white space gone, but some captions hidden

Perhaps I've made a critical flaw with how I've set up my design, but I'd like the white space gone and all of the captions shown, if this is possible.

Thanks in advance for any help.

Answer 1

The "column" css property is not the best solution to achieve that layout.

Try this:

#photo-container {
    position: relative;
    float: left;
    width: 100%;
    clear: left;
    max-width: 1902px;
}

.photo {
    position: relative;
    float: left;
    width: 33.33%;
}

Answer 2

Rather then use the column's, why not just set the img's to 33.333% of the width.

Like this: https://jsfiddle.net/ouhvqo37/1/

.header, .footer{background-color: red; width: 100%; height: 50px; color: white; text-align: center;}
.footer{position: relative; float: left;}
#photo-container {
    width: 100%;    
    max-width: 1902px;
}
.photo {
    position: relative;
    float: left;
    width: 33.3333%;
}
img{width: 100%}
.caption {
    position: absolute;
    z-index: 10;
    bottom: 0;
    width: 100%;
    height: 75px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
}