Floating Lists Left With Different Heights

[mbond5]

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

[Stevie D]

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

[mbond5]

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

[mbond5]

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

[PicnicTutorials]

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

[mbond5]

Just put in the display:inline-block and still looks the same.

Any other ideas anybody can think of?

Thanks,

Mike

[PicnicTutorials]

http://gtwebdev.com/workshop/layout/...ck-gallery.php

[mbond5]

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

[ralph.m]

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.

[mbond5]

Thanks ralph.m

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

Thanks,

Mike

[ralph.m]

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.