Strange floating div behaviour

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.

Answer 2

Personally I'd give the items a min-height instead. This way, you'll maintain at least a certain height no matter the image size/content whilst allowing the content to grow. Of course, this is with the understanding that the <li> won't exceed a certain (extreme) height or you run into this issue again.

Answer 3

You can use JQuery equl height to make each <li> of same height, please find the code below :-

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
       thisHeight = $(this).height();
       if(thisHeight > tallest) {
         tallest = thisHeight;
       }
    });
    group.height(tallest);
}

 $(document).ready(function() {
    equalHeight($(".subpagesList li"));
 });

Here is the tutorials

Answer 4

This was caused by missing 'height' attribute for 'LI' elements. The 'Gallery 5' element was a bit shorter than the others and the 'Gallery 6' element was actually not floating to the right, but under 'Gellery 5' element. Then the 'Gallery 6' element started floating naturally on the left.

.subpagesGallery li {
    clear: none;
    float: left;
    margin: auto auto;
    padding: 0 0;
    overflow: hidden;
    width: 150px;
    height:200px; /*that helped*/
}

Maybe just posting question on SO makes you smarter... I don't know for sure ;)