Help with odd column/row behavior

I just cannot figure out why the columns on a photo album I have are not lining up correctly (in any browser). Sometimes it works and then suddenly it won't work at all.

It is 3 column layout with multiple rows, but occasionally a row may have only one image in middle column or two images in a row. Seems very random to me. Look in fourth and seventh rows.

One example page is at http://natureinfocus.com/galleries/flora/plant-families/a-e .

I've attached the entire css file, but I've included a smaller portion here with the area in red that I think controls the columns here. (I didn't write this theme so don't assume that I understand all of it.)

Any ideas really appreciated since I am totally stuck!


* {padding:0;margin:0;}
html {margin-bottom:1px!important;height:100%!important;height:auto;}
.clr{clear:both}

.right { float: right;}
.left { float: left;}
.center { margin-left: auto; margin-right: auto;}

:focus{outline:none;}
img,a img{border:0;}
ul.hor-list,ul.hor-list li{display:inline;margin-left:0!important;}
body{text-align:center;font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Helvetica,Arial,sans-serif;background-color:#333;color:#bbb;font-size:12px; line-height:1.4;overflow: -moz-scrollbars-vertical;}

a,a:active{color:#E7E7E7;text-decoration:none;}
a:focus,a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 10px 0;color:#ccc;}
h1{font-size:26px;}
h2{font-size:22px;}
h3{font-size:16px;}
h4{font-size:13px;}

#image-stat h2,table#archive ul.month li a,#navbar,#albumbar,#familybar,.fadetoggler-exif,.fadetoggler,#news-cat-list a,.newsarticlecredit,#right,#left,.latestnews-cats,.latestnews-date,#pagination,.commentinfo h4,a.commentmeta,#commentcontent h3,div.ss-controls,div.nav-controls,div.pagination a,div#headline h4, div#headline-tags,div.pagination span.current,div.download,div#album-wrap ul li h4,.metadata_title {
font-size:10px;text-transform:uppercase;letter-spacing:2px;font-family:verdana,arial,helvetica,sans-serif;}
#main-menu{width:100%;border-bottom:1px solid #2a2a2a;padding:15px 0;}
#main-menu ul{margin:10px 0;padding:0;display:inline;}
#main-menu ul li{margin:0 10px;padding:0;display:inline;list-style-type:none;background:none;}
#main-menu ul li a,#main-menu ul li span{padding:5px 7px;text-transform:uppercase;letter-spacing:2px;font-family:verdana,arial,helvetica,sans-serif;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px; }
#main-menu ul li a:hover,#main-menu ul li span:hover{background:#4a4a4a;text-decoration:none;cursor:pointer;}
#main-menu ul li a.active,#main-menu ul li.active a{background:#E7E7E7;color:#fff;font-weight:bold;}

div#page{width:900px;margin:0 auto;text-align:left;}
div#container{padding:15px 20px 20px 20px;}

#site-title{background:url(../images/hr.gif) repeat-x 0 50%;margin-top:0;text-align:center;}
#site-title h1{font-family:Georgia,"Times New Roman",Times,serif;line-height:1.5;margin:0;padding:0 15px;display:inline;font-size:36px;letter-spacing:3px;background:#2a2a2a;font-style:italic;font-weight:normal;}
#site-title h1 a:hover{text-decoration:none;}
#site-title h2{line-height:1;margin:0 0 10px 0;padding:0 15px;display:inline;color:#888;font-size:14px;letter-spacing:4px;text-transform:uppercase;background:#2a2a2a;font-family:verdana,helvetica,arial,sans-serif;}
#zplogo{background:#333;}

div#headline{clear:both;margin:15px 0 15px 0;text-align:justify;background:url(../images/hr.gif) repeat-x 0 100%;}
div#headline h4{padding-bottom:15px;text-align:center;margin-bottom:0;}
div#headline-text{margin-bottom:5px;margin-left:10%;margin-right:10%;text-align:left;}

div#headline-text h4{text-align:center;margin-bottom:5px;margin-left:auto;margin-right:auto;font-style:italic;font-weight:bold;margin:5px 0 10px 0;font-size:15px;letter-spacing:2px;font-family:verdana,arial,helvetica,sans-serif;}

div.headline-tags{margin-bottom:5px;}

#navbar{background:#2a2a2a url(../images/hr.gif) repeat-x 0 100%;width:100%;margin:10px 0 2px 0;}
#navbar a,#navbar span{padding:0 5px;line-height:25px;display:block;}
#navbar-next{float:right;text-align:right;}
#navbar-prev{float:left;text-align:left;}
#navbar-center{text-align:center;}
#navbar span.singlenews_next a,#navbar span.singlenews_prev a{display:inline;}

#albumbar{background:#2a2a2a url(../images/hr.gif) repeat-x 0 100%;width:100%;margin:10px 0 2px 0;}
#albumbar a,#albumbar span{padding:0 5px;line-height:25px;display:block;}
#albumbar-center{text-align:center;}

div#album-wrap ul{margin:10px 0;padding:0;}
div#album-wrap ul li{width:273px;display:block;float:left;margin:10px 20px 10px 0;padding:0;list-style-type:none;background:none;}
div#album-wrap ul li.lastcol{margin-right:0;}
div#album-wrap ul li a.album-thumb {padding:2px;display:block;border:1px solid #4a4a4a;}
div#album-wrap ul li a.
:focus {outline:none;}
div#album-wrap ul li a.album-thumb:hover {border:1px solid #ccc;}
div#album-wrap ul li h4{margin:2px 0 0 0;padding:0;}

div#pagination ul{border:0; margin:10px 0; padding:0;list-style:none;}
div#pagination ul li{border:0;margin:0;padding:0;list-style:none;display:block;margin-right:2px;float:left;}
div#pagination ul a,div#pagination ul li.current span{border:solid 1px #E7E7E7;margin-right:2px;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
div#pagination ul .disabledlink{border:solid 1px #4A4A4A;display:block;font-weight:normal;margin-right:2px;padding:3px 4px;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
div#pagination ul li.current a,div#pagination ul li.current span{background:#E7E7E7;color:#FFFFFF;font-weight:bold;display:block;padding:3px 6px;}
div#pagination ul a:link,div#pagination ul a:visited{color:#E7E7E7;display:block;padding:3px 6px;text-decoration:none;}
div#pagination ul a:hover{color:#fff;}

#galleriffic-wrap {margin:15px 0 0 0;overflow:hidden;display:none;}
div.content{display: none;float: right;width: 550px; }
div.content a,div.navigation a{text-decoration: none;}
div.content a:focus,div.content a:hover,div.content a:active{text-decoration: underline;}
div.controls{margin-top: 12px;height: 35px;}
div.controls a{padding: 5px;}
div.ss-controls{float: left;}
div.nav-controls{float: right;}
div.slideshow-container {position: relative;clear: both;
height: 540px; /* This should be set to be at least the height of the largest image in the slideshow */
background:url(../images/hr.gif) repeat-x;}
div.loader {position: absolute;top: 0;left: 0;background-image: url(../images/loader.gif);background-repeat: no-repeat;background-position: center;width: 550px;
height: 540px; /* This should be set to be at least the height of the largest image in the slideshow */}
div.slideshow {}
span.image-wrapper{background:url(../images/hr.gif) repeat-x bottom;}
div.slideshow span.image-wrapper {display: block;position: absolute;top: 0;left: 0;}
div.slideshow a.advance-link {display: block;width: 550px;
height: 540px; /* This should be set to be at least the height of the largest image in the slideshow */
line-height: 540px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: center;}
div.slideshow a.advance-link:focus {outline:none;}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {text-decoration: none;}
div.slideshow img {vertical-align: middle;border: 1px solid;border-color: #333;}
div.detail-download {float:right;font-size:10px;margin-top:3px;}
div.detail-download a,div.nav-controls a,div.ss-controls a {margin-left:10px;background:#4a4a4a;padding:3px 5px;text-transform:uppercase;letter-spacing:1px;font-family:verdana,arial,helvetica,sans-serif;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px; }
div.detail-download a:hover,div.nav-controls a:hover,div.ss-controls a:hover{background:#E7E7E7;color:#fff;text-decoration:none;}
div.nav-controls a,div.ss-controls a{margin-top:5px;margin-bottom:10px;}
div.ss-controls a{margin-left:0;}
div.caption-container {position:relative;height:25px;width: 550px;}
span.image-caption {position:absolute;top:0;left:0;display: block;width: 550px;height:25px;}
div.caption {position:absolute;top:0;left:0;height:25px;width: 550px;}
#galleriffic-wrap div.image-title {font-weight: normal;font-size: 14px;font-style:italic;font-family:arial,helvetica,sans-serif;}
div.navigation {/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */}
div.photo-index {color: #888;}
ul.thumbs,#image-stat ul {clear: both;margin: 0;padding: 0;}
ul.thumbs li,#image-stat li{float: left;padding: 0;margin: 5px 10px 5px 0;list-style: none;}
ul#no-gal-ul,#image-stat ul{margin:0 auto 20px auto;text-align:center;width:820px;}
ul.thumbs li.no-gal-li{}
a.thumb,#image-stat a {padding: 2px;display: block;border: 1px solid #4a4a4a;}
ul.thumbs li.selected a.thumb {background: #fff;}
a.thumb:focus,#image-stat a:focus {outline: none;}
a.thumb:hover,#image-stat a:hover {border: 1px solid #ccc;}
ul.thumbs img,#image-stat img {border: none;display: block;}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {border-color: #4a4a4a;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;}
div.pagination {clear: both;}
div.navigation div.top {margin-bottom: 12px;height: 11px;}
div.navigation div.bottom {padding-top:5px;}
div.navigation a.prev {}
div.navigation a.next {}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {display: block;float: left;margin-right: 2px;padding: 2px 7px 2px 7px;border: 1px solid;}
div.pagination a:hover {text-decoration: none;background-color: #2a2a2a;border-color:#ccc;}
div.pagination span.current {font-weight: bold;background-color: #fff;border-color: #fff;color: #2a2a2a;}
div.pagination span.ellipsis {border: none;padding: 5px 0 3px 2px;}

#image-page{text-align:center;margin:0 auto 30px auto;}
#image-page table td{vertical-align:top;padding:1px 15px;text-align:center;}
#image-page .img-title{font-weight:bold;margin:5px 0 10px 0;font-size:15px;letter-spacing:2px;text-transform:uppercase;font-family:verdana,arial,helvetica,sans-serif;}
#image-page #rating-wrap form{text-align:center;}

#rating-wrap{margin:0 auto;text-align:center;width:220px;}
#images-three{clear:both;margin:15px auto 10px auto;}
#images-three #left{float:right;width:81px;text-align:right;}
#images-three #right{float:left;width:81px;text-align:left;}

ul#nav-pages,ul.nav-subpages{list-style:none;display:inline;}
ul#nav-pages li,ul.nav-subpages li{display:inline;}
ul#nav-pages li a,ul.nav-subpages li a{margin:0 0 0 5px;padding:0 0 0 10px;display:inline;background:url(../images/hr.gif) repeat-y;}
ul.nav-subpages li:first-child a{background-image:none!important;}
ul.nav-subpages li a.subpage-active{text-decoration:underline;}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

You need to be a bit more specific on exactly where the issue is. Tell us which section the issue appears on: I don't want to trawl through all of them when I'm not sure what I'm looking for.

Tell me how I can be more specific? Go to posted link and look at fourth row of images. There is only one image where there should be 3 images. Seventh row of images has 2 images in 2nd and 3rd columns. They should all be 3 images in every row. At least that's what I see in several browsers.

The problem occurs because in the 3rd and 6th row the latin name extends to two lines, which then means the subsequent floated image floats against the text, rather than against the left border.

To solve this, the best solution I think is to apply a height to div#album-wrap ul li.

Also,

as a good practice you should always define your measurements via px, em, & or otherwise, no blank numbers (including zeros). Depending on the browser these are interpreted differently.

I personally prefer to define each margin (i.e. margin-top: 10px; margin-bottom:10px; margin-left: 0px; margin-right:0px;) I find it avoids bugs with cross browser compatibility.

Now fixed! Thanks to all of you for pointing me in the right direction - never would have figured it out alone. Can't believe adding just two words fixed this for me.

(including zeros).
Surely that is wrong, zero is zero; there is no point in adding inches or pixels because zero pixels is exactly the same as zero light years.

Surely that is wrong, zero is zero; there is no point in adding inches or pixels because zero pixels is exactly the same as zero light years.

I agree, I've never had a problem with a browser choking at margin:0.