I am encountering an issue while attempting to generate a UL list that includes images and descriptions. When there are 5 items in the list, everything looks good, but as soon as the 6th item is added, it floats to the right, and the 7th item falls down and then floats to the left. What could be the cause of this behavior? I have observed this problem in both IE 8 and Firefox 13.
https://i.sstatic.net/ihRXd.jpg
Here is the HTML code:
<ul class="subpagesList subpagesGallery" id="subList2"><li class="l1">
<div class="photo">
<a href="?galeria-1,15"><img src="files/150/_demo_01.jpg" alt="" /></a>
</div>
<div class="descriptionBox">
<h2><a href="?galeria-1,15">Galeria 1</a></h2>
<div class="description"><p>Galeria 1</p></div>
</div>
</li><li class="l2">
<div class="photo">
<a href="?galeria-2,16"><img src="files/150/_demo_02.jpg" alt="" /></a>
</div>
<div class="descriptionBox">
<h2><a href="?galeria-2,16">Galeria 2</a></h2>
<div class="description"><p>Galeria 2</p></div>
</div>
</li><li class="l3">
<div class="photo">
<a href="?galeria-3,17"><img src="files/150/_demo_03.jpg" alt="" /></a>
</div>
<div class="descriptionBox">
<h2><a href="?galeria-3,17">Galeria 3</a></h2>
<div class="description"><p>Galeria 3</p></div>
</div>
</li><li class="l4">
<div class="photo">
<a href="?galeria-4,18"><img src="files/150/_demo_04.jpg" alt="" /></a>
</div>
<div class="descriptionBox">
<h2><a href="?galeria-4,18">Galeria 4</a></h2>
<div class="description"><p>Galeria 4</p></div>
</div>
</li><li class="l5">
<div class="photo">
<a href="?galeria-5,19"><img src="files/150/_demo_05.jpg" alt="" /></a>
</div>
<div class="descriptionBox">
<h2><a href="?galeria-5,19">Galeria 5</a></h2>
<div class="description"><p>Galeria 5</p></div>
</div>
</li><li class="lL">
<div class="photo">
<a href="?galeria-6,20"><img src="files/150/_demo_01.jpg" alt="" /></a>
</div>
<div class="descriptionBox">
<h2><a href="?galeria-6,20">Galeria 6</a></h2>
<div class="description"><p>Galeria 6</p></div>
</div>
</li></ul>
And here is the corresponding CSS code:
/* STYLING FOR SUB PAGES LIST */
.subpagesList {
float: left;
width: 100%;
margin: 7px 0;
list-style: none;
}
.subpagesGallery {
/*width: 100%;*/
overflow: hidden;
width: 800px;
}
.subpagesList li {
clear: left;
float: left;
width: 96%;
margin: 10px 0;
padding: 13px 2%;
border-left: 2px solid #e7eaee;
background: url('img/items_shade.png') repeat-x left top;
}
.subpagesGallery li {
clear: none;
float: left;
margin: auto auto;
padding: 0 0;
overflow: hidden;
width: 150px;
}
* html .subpagesList li {
width: 100%;
}
.subpagesList li .photo {
float: left;
margin: 0 18px 5px 0;
}
.subpagesGallery li .photo {
clear:both;
overflow: hidden;
}
.subpagesGallery li .descriptionBox{
clear:both;
width:180px;
overflow: hidden;
}
.subpagesList li h2 {
padding-bottom: 10px;
}