SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Floating Lists Left With Different Heights

    I ran into bit of an issue with this.

    Here is the page so far its looking great...

    http://freshtastik.ca/modo/the-fresh-feed/

    Only thing is I want the List items to stack nicely below each other no matter the height like the picture I attached. Is this possible?

    Thanks

    Mike

    MFR-WebsiteDesign.jpg

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mbond5 View Post
    I ran into bit of an issue with this.

    Here is the page so far its looking great...

    http://freshtastik.ca/modo/the-fresh-feed/

    Only thing is I want the List items to stack nicely below each other no matter the height like the picture I attached. Is this possible?
    Not easily, at least if you want to maintain full compatibility. One solution is to force all the boxes in each row to be the same height, by using display:table;. The other, as being discussed in another thread uses Javascript to haul the boxes into line.

    The third way is to reorder your code and have columns rather than rows, but then you are relying far more heavily on manually setting up the page so that you have the right number and size of boxes in each column, which obviously is more work and is less robust if you want to edit the content.

    Off Topic:

    PS - love your logo

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stevie D!!!

    Tried to implement the Vanilla Masonry on the page but did nothing. These are lists items and being pulled in through Facebook I can't really change them to divs but figured wouldnt really matter but still doesnt work, didn't do anything. I'd rather not make all the same height if don't need to, hopefully theres a way to make it work hoping I'm just missing something.

    Is there anything you can see that I'm missing?

    Thanks,

    Mike

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Almost got it but not quite, it does it perfectly but for some reason when you get down further the lists dont really float to the left after it gets down to the second row.

    It mixes the li's up.

    But very close to being there!

    Any thought?

    Thanks,

    Mike

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Sorry if I missed someone already saying this but why don't you display:inline-block them instead of float. That should work as you need

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just put in the display:inline-block and still looks the same.

    Any other ideas anybody can think of?

    Thanks,

    Mike

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    With the example you posted above is great but if the boxes have different heights smaller boxes will have a large white space after it which is why used the Masonry approach which works well but just need the items to fall in proper order.

    Any ideas how that could be accomplished.

    Thanks

    Mike

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mbond5 View Post
    for some reason when you get down further the lists dont really float to the left after it gets down to the second row.

    It mixes the li's up.
    That's just how those scripts work. They seem to place elements where they will fit best. You may have to live with that, or write a better script.

  10. #10
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph.m

    Do you know of any jQuery plugins that can accomplish what I am going for?

    Thanks,

    Mike

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Do you know of any jQuery plugins that can accomplish what I am going for?
    I had to dig around a bit just to come up with the ones we've given you, and personally, I think they do what you need. Does it really matter what order they fall into? There may be a way to tweak the ordering in the JS, but it's not my area, I'm afraid.


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
  •