SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    list items not floating left

    Hey all,

    Notice in this link:

    HL Law Group

    the 4 images nested in lists do not align correctly. The first two align correctly, then the third one should go below the first one and the fourth one should go below the second one. Yet, instead, the third one aligns to the right (rather than left) so it sits under the second one, not first one. I am not sure why this is occurring. Even when I put float: left; or display: inline, to the li tags, still it gives same wrong behavior.

    Thanks for response.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Set a height on those LIs, or make the images all the same height. The first image is 226px tall, the second 224px, so the third LI is snagging on the first and being prevented from floating all the way left.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    These days I prefer to use inline-block for variable height elements and avoid the snagging issue.

    e.g.
    Code:
    
    .gallery_image li {
     float:none;
    display:inline-block;
    vertical-align:top;
    }
    * html .gallery_image li {
      display:inline;
    }
    *+html .gallery_image li {
      display:inline;
     }
    Elements can be any height and still line up.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    These days I prefer to use inline-block for variable height elements and avoid the snagging issue.
    I'm sure if you say that enough times, Paul, it will get through my skull!

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    These days I prefer to use inline-block for variable height elements and avoid the snagging issue.

    e.g.
    Code:
    
    .gallery_image li {
     float:none;
    display:inline-block;
    vertical-align:top;
    }
    * html .gallery_image li {
      display:inline;
    }
    *+html .gallery_image li {
      display:inline;
     }
    Elements can be any height and still line up.
    Thanks, that worked on IE too.


Tags for this Thread

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
  •