Question

I’m trying to create UL list with images and descriptions. With 5 items in the list it’s fine, 6th item floats on the right, 7th falls down and floats on the left.
What could be causing this behaviour?
This happens both in IE 8 and Firefox 13

here’s HTML:

<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 CSS:

/* SUB PAGES LIST STYLES */
.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;
}

Answer 1

You asked why this is happening, not how to fix it. The diagram below should make clear what is happening.

The divs are floating left; the 6th div is dropping below the top 5 “on its way” to the left, but because div 5 is shorter than div 4, div 6 is butting up against div 4 and cannot move left any farther. Div 7 drops below div 6, and can move all the way to the left.

It’s definitely a gotcha with divs.