CSSでfloat:leftを当てたら表示が崩れる

質問

【緊急】はじめまして、非常に困っておりますので皆様のお力を貸してください。
ちなみに初心者なのでわかりやすくご教示頂けると助かります。

wordpressでnextgen-galleryというプラグインを使用して写真のギャラリーを作成しました。
該当のURLです。
http://6924d63e37dc33ef.lolipop.jp/works/

CSSで左にfloatさせる事で一列に5枚表示されるのですが、二段目（6枚目移行）に表示される画像の位置が左からではなく右からであったり、右から2枚表示され残り一枚だけ3段目に表示されてしまったりします。
仮に8枚の画像があった場合「■」を一枚の写真(□は一枚分のスペース)とすると
■■■■■
■■■□□
と表示したいのですが
■■■■■
□□□■■
■□□□□
と表示されてしまうのです。
ブラウザ間で表示の違いはありません。

ブラウザのデベロッパーツールを使い、CSSの各項目を思いつく限り無効にしたり設定を変えて表示を確認したり、それらしい箇所のCSSを実際に書き換えてみたりしましたが改善しません。
こちらがプラグインのCSSです。
/* ----------- Gallery style -------------*/

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width: 100%;
clear:both;
display:block !important;
}

.ngg-galleryoverview .desc {
/* required for description */
margin:0px 10px 10px 0px;
padding:5px;
}

.ngg-gallery-thumbnail-box {
float: left;
}

.ngg-gallery-thumbnail {
float: left;
margin-right: 7px;
margin-left: 3px;
text-align: center;
}

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
margin:4px 0px 4px 0px;
padding:4px;
position:relative;
}

.ngg-gallery-thumbnail img:hover {
background-color: #dddddd;
}

.ngg-gallery-thumbnail span {
/* Images description*/
font-size:90%;
padding-left:5px;
display:block;
}

.ngg-clear {
clear: both;
}

なおjQuery Colorboxというプラグインを組み合わせて使用していますが、プラグインを無効にしても改善しなかった為、記載はしていません。

私ではいくら調べても原因がわからないのでほとほと困り果てております。
何卒よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

＞■■■■■
＞□□□■■
＞■□□□□
　この様になるのは、最初の３つのheightが、高いからですね。
　それぞれのblockの高さを指定しなおすと良いかと・・

.ngg-gallery-thumbnail-box {
float: left;
height:200px;
overflow:hidden;
}
とか・・・

お礼

ご指示頂いた通りにCSSを指定したところ、見事正常に表示されました！
相当な時間この問題につまづいていたので非常～に助かりました！！
本当にありがとうございました！！！

回答No.1

tracer

一部のブラウザだけおかしいなら、CSSの問題かと思いますが、すべてのブラウザで意図しない表示になってしまう場合の多くは、HTML/CSSの単純なミスです。こ難しい文法などではなく、どこかに極端な間違いがあるはずです。
<>やコーテーションやhtmlタグが全角になってるとか、存在しないタグが使用されているとか、タグが閉じられていないとかです。
たとえば、bodyの開始タグがないのはなぜですか？これは極端な記入漏れです。

お礼

ご指摘ありがとうございます！
HTMLをwordpressに移す際に抜けてしまったようです。
恥ずかしながら全く気付いていませんでした。