div rows skip a row after first two rows

Question

in my web page the first two rows of lists inside a div are just fine, they are 4 columns wide. after the first two rows in the third row, the left most 3 columns are not there, but the list element on the very right most column is. the next row down is perfectly fine and then is problem repeats on the 5th row. crude diagram below where * represents a list element

* * * *
* * * *
      *
* * * *
      *

Searched for a similar issue but couldn't find anything that matches and im sure it must be something in my css .li but i cant seem to figure it out. also, the code is only snippets related to the area having probelms. if the entire code (279 lines html and 398 lines css) is needed let me know.

Thank you in advance

css:

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    width: 260px;
    float: left;
    padding:17px;
    position: relative;
}
.gallery h3 {
    position: absolute;
    top: 190px;
    background: url(images/linkbg.jpg) repeat-x top left;
    padding: 5px;
    opacity: 0.85;
    width: 250px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}
.gallery img {
    border-radius: 10px;
}
.poptrox-popup {
    background: #111111;
    border-radius: 8px;
    padding: 20px 20px 60px 20px;
    color: #aaaaaa;
}
.poptrox-popup .closer {
    position: absolute;
    width: 80px;
    height: 30px;
    bottom: 15px;
    right: 20px;
    background: url(images/linkbg.jpg) repeat-x top left;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    outline: 0;
    border-radius: 8px;
    line-height: 30px;
    text-shadow: 0 1px 1px #003A6C;
}
.poptrox-popup .closer:hover {
    background: #2094E6;
}
.poptrox-popup .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
    line-height: 60px;
    padding: 0 20px 0 20px;
}

html:

<div id="main">
    <ul class="gallery">
        <li>
             <h3>Cisco 3560 Front</h3>
             <a href="images/cisco3560.jpg"><img class="top" src="images/cisco3560.jpg" width="260" height="200" title="Cisco 3560 Front View" alt="" /></a>

            <p>Cisco Catalyst 3560 Front View</p>
        </li>
        <li>
             <h3>Cisco 3560 Rear</h3>
             <a href="images/cisco3560rear.jpg"><img class="top"     src="images/cisco3560rear.jpg" width="260" height="200" title="Cisco 3560 Rear View" alt="" /></a>

            <p>Cisco 3560 Rear View</p>
        </li>
        <li>
             <h3>Cisco 2970</h3>
             <a href="images/cisco2970.jpg"><img class="top" src="images/cisco2970.jpg" width="260" height="200" title="Cisco 2970" alt="" /></a>

            <p>Cisco 2970 Front View</p>
        </li>
        <li>
             <h3>Cisco 3640 (NMA)</h3>
             <a href="images/cisco3640.jpg"><img class="top" src="images/cisco3640.jpg" width="260" height="200" title="OOB/NMA" alt="" /></a>

            <p>Cisco 3640 Front view. Commonly known in our network as an nma</p>
        </li>
        <li>
             <h3>Cisco 2621 (NM1)</h3>
             <a href="images/cisco2621.jpg"><img class="top" src="images/cisco2621.jpg" width="260" height="200" title="Cisco 2621 Front View" alt="" /></a>

            <p>Cisco 2621 Front view. Commonly known in our network as an nm1</p>
        </li>
        <li>
             <h3>Cisco 2621 Rear</h3>
             <a href="images/cisco2621rear.jpg"><img class="top" src="images/cisco2621rear.jpg" width="260" height="200" title="Cisco 2621 Rear View" alt="" /></a>

            <p>Cisco 2621 Rear view. The expansion ports would normally have modem cards installed in our network. This known by Mediacom as an nm1</p>
        </li>
        <li>
             <h3>Cisco 7600</h3>
             <a href="images/cisco7600.jpg"><img class="top" src="images/cisco7600.jpg" width="260" height="200" title="Cisco 7600 Front View" alt="" /></a>

            <p>Cisco 7600 Router Front view. The only one in the network currently is ar01.ent.demia</p>
        </li>
        <li>
             <h3>Cisco 7606</h3>
             <a href="images/cisco7606.jpg"><img class="top" src="images/cisco7606.jpg" width="260" height="200" title="Cisco 7606 Front View" alt="" /></a>

            <p>The Cisco 7606 is a smaller version of the 7609 vtn switch</p>
        </li>
        <li>
             <h3>Cisco 7609</h3>
             <a href="images/cisco7609.jpg"><img class="top" src="images/cisco7609.jpg" width="260" height="200" title="Cisco 7609 Front View" alt="" /></a>

            <p>Cisco 7609 Front view. More commonly known as a VTN Switch</p>
        </li>
        <li>
             <h3>Cisco 1711 Front</h3>
             <a href="images/cisco1711.jpg"><img class="top" src="images/cisco1711.jpg" width="260" height="200" title="Cisco 1711 Front View" alt="" /></a>

            <p>Cisco 1711 Router Front view.</p>
        </li>
        <li>
             <h3>Cisco 1711 Rear</h3>
             <a href="images/cisco1711rear.jpg"><img class="top" src="images/cisco1711rear.jpg" width="260" height="200" title="Cisco 1711 Front View" alt="" /></a>

            <p>Cisco 1711 Router Rear view.</p>
        </li>
    </ul>
</div>

Answer 1

ROOT CAUSE Your actual design will give you as many LI you can have in your browser width, due to you are using float and you have not provide a height so you have multiple heights what will affect the design.

FIX Add height:310px; to .gallery li class.

EXAMPLE http://goo.gl/QC9IjD