List Doesn't follow rules, second row always floating right

HTML & CSS
1

Ok so i’m over this.

I have a really simple list. I even used a off the shelf script to make this work.
Now all of the sudden my second row floats right even though it’s told to float left. The 3rd row lines up perfect but it shouldn’t be the 3rd row. If I make the width any less than 600px it only shows 2 per line.

Here is what I mean. You can check the example at this site. http://atteberry.grassmapper.com/gallery.php

I want to be able to just specify a width of the gallery so that 3 images show per line.

Here is the CSS I’m using.


ul{
    margin: 0 auto;
    padding: 0;
}

/* The wider the #list_wrapper is, the more columns will fit in it */
#list_wrapper{
    width: 600px;
    float:left;
}

/* The wider this li is, the fewer columns there will be */
    ul.multiple_columns li{
        text-align: left;
        float: left;
        list-style: none;
        
        width: 200px;
    }

Here is the code for the page.


<div id="list_wrapper">
    <ul class="multiple_columns">
    <li><a href="folder2.php?folder=Kitchens"><img src="images/gallery_main/kitchen.jpg"></a><p>Kitchens</p></li>
    <li><a href="#"><img src="images/gallery_main/bathroom.png"></a><p>Bathrooms</p></li>
    <li><a href="folder2.php?folder=Libraries"><img src="images/gallery_main/studies.jpg"></a><p>Libraries</p></li>
    <li><a href="folder2.php?folder=Millwork"><img src="images/gallery_main/millwork.jpg"></a><p>Custom Millwork</p></li>
    <li><a href="#"><img src="images/gallery_main/closet.png"></a><p>Dressing Rooms</p></li>
    </ul>
</div>

Thank You!

2

The problem is that the second image (images/gallery_main/bathroom.png) is a little bit (1px) higher than the other images.
This causes the <li> it’s in to be 1px higher than the <li> to it’s left and the <li> to it’s right. Since the <li>'s have float left, they will float against the nearest thing they can float against that also has float left, or the left of it’s parent if there is no such element.
If the images all have the same height there is nothing it can float against so it will start again on a new row from the left, BUT in your case it can float against the 1px the second <li> is too tall.

So:

Hope that makes sense?

There are several fixes. In order of how complex they are:

  1. Make sure all images have the exact same height
  2. Set a height on the <li>'s with overflow: hidden so they are guaranteed to have the same height
  3. Use display: inline-block instead of float: left (harder to get to work in IE6 and IE7, but if you don’t care about those it’s easy).
3

Make sure all images have the exact same height

Expanding on what Scallio said… you can do this by setting the .multiple_columns LI IMG height in the CSS, the width will be automatically adjusted. It should for the most part it should solve your issue.

Also why do you need to wrap a DIV around a UL ?

4

I was more thinking of adjusting the height of the physical image, i.e. cropping off one row of pixels, but yeah, that’ll work too :slight_smile:

5

If your images / LIs are of differing heights, a nice alternative to floats is display: inline-block. So, for example, instead of

.gallery li {
  display: inline;
  float: left;
  list-style: none outside none;
  padding: 5px;
}

use

.gallery li {
[COLOR="#FF0000"]  display: inline-block;[/COLOR]
  list-style: none outside none;
  padding: 5px;
}

(note that float: left is removed altogether).

Another example:

ul.multiple_columns li {
  [COLOR="#FF0000"]float: left;[/COLOR]
  list-style: none outside none;
  padding: 5px;
  text-align: right;
  width: 200px;
}

change to

ul.multiple_columns li {
  [COLOR="#FF0000"]display:inline-block;[/COLOR]
  list-style: none outside none;
  padding: 5px;
  text-align: right;
  width: 200px;
}

Older versions of IE don’t understand inline-block, so for them set the LI to display: inline to get the same reslut.