SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot clarnp49's Avatar
    Join Date
    Sep 2004
    Location
    Bowie MD
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

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

    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.
    Code:
    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.
    HTML Code:
    <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!
    If it works don't fix it. If it's broke fix it.
    He who knows all is the smartest.
    He who doesn't know anything isn't dumbest.

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    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:

    lis.jpg

    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).
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    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
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If your images / LIs are of differing heights, a nice alternative to floats is display: inline-block. So, for example, instead of

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

    Code:
    .gallery li {
      display: inline-block;
      list-style: none outside none;
      padding: 5px;
    }
    (note that float: left is removed altogether).

    Another example:

    Code:
    ul.multiple_columns li {
      float: left;
      list-style: none outside none;
      padding: 5px;
      text-align: right;
      width: 200px;
    }
    change to

    Code:
    ul.multiple_columns li {
      display:inline-block;
      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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •