thumbnail gallery not fitting images side by side

Question

I am using a class called galleryItem to group thumbnail images together with a title and then I am using Lightbox as a gallery to view the images.

My problem is getting the images to stay side by side.

here's my html:

<div class="contents">
       <div class="galleryItem">
        <a href="img/watermelon.jpg" rel="lightbox[menu]"><img src="img/watermelon.jpg" title="Vanilla" alt="Watermelon" width="90px" height="110px"></a>
        <p.smallText>Vanilla</p>

    </div>

  <div class="galleryItem">
        <a href="img/strawberry.jpg"rel="lightbox[menu]"><img src="img/strawberry.jpg" alt="Watermelon"  width="90px" height="110px" ></a>
         <p.smallText>Chocolate</p>

    </div>
    <div class="galleryItem">
        <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/chips.jpg" alt="Watermelon" width="90px" height="110px" ></a>
         <p.smallText>Strawberry Sorbet</p>

    </div>
     <div class="galleryItem">
        <a href="img/chips.jpg"rel="lightbox[menu]"><img src="img/strawberry.jpg" alt="Watermelon" width="90px" height="110px"  ></a>
          <p.smallText>Roasted Strawberry</p>

    </div>
    <div class="galleryItem">
        <a href="img/assortment.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon" width="90px" height="110px"></a>
         <p.smallText>Whiskey Pecan</p>

    </div>
    <div class="galleryItem">
        <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
         <p.smallText>Pomegranate Sorbet</p>

    </div>
    <div class="galleryItem">
        <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
         <p.smallText>Salty Caramel</p>

    </div>
    <div class="galleryItem">
        <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
          <p.smallText>Mint Chip</p>

    </div>
    <div class="galleryItem">
        <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
          <p.smallText>Peanut Butter Chip</p>

    </div>
    <div class="galleryItem">
        <a href="img/watermelon.jpg"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
         <p.smallText>Nutella</p>

    </div>
     <div class="galleryItem">
        <a href="#"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
          <p.smallText>Mango Sorbet</p>

    </div>
     <div class="galleryItem">
        <a href="#"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
          <p.smallText>Raspberry Lemon Yogurt</p>

    </div>
     <div class="galleryItem">
        <a href="#"rel="lightbox[menu]"><img src="img/watermelon.jpg" alt="Watermelon"></a>
         <p.smallText>Cookies and Cream</p>

    </div>



    </div> <!--end contents -->

here's my css:

.contents {
    width: 80%;
    margin: 20px auto;
    overflow: hidden;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;   

    width: 16%;
    margin:  2% 2% 80px 2%;

}

.galleryItem h3 {
    text-transform: uppercase;
}

.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.galleryItem img:hover { opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.galleryItem h3:hover {text-size:large; color:rgb(128, 0, 0);}

/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p, {font-size: 18px;}
}

Answer 1

The problem is the items with two lines of text below the images are taller than the other items, which has your float kicked over to the side, if you set a fixed height on the containing wrapper .galleryItem it will resolve your issue

.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
    width: 16%;
    margin: 2% 2% 80px 2%;
    height: 200px;
}