Floating Mulitiple Divs of Different Lengths

[skinnyguy76]

I want to float news stories of varying lengths on a multi-column page so that the stories are generally ordered left to right, but the next row of stories tucks tightly below the story above it even though they all may be different lengths, sort of like pinterest.com tucks stories tightly together.

I’ve tried simply floating them all left, but I get all kinds of funky spacing and can’t seem to find a solution. You can see it at http://www.advent-design.com/Banks30 . Narrow your browser window until the 5-columns wrap to 3 and you’ll see what I mean.

[skinnyguy76]

Thanks wolfcry911. That appears to be what I’m wanting to do. If anyone else has a way to do this with pure CSS, I’d appreciate it. Otherwise, I’ll dig into Masonry.

[TheDoc]

No way to do this with pure CSS.

[skinnyguy76]

And wolfcry911s suggestion won’t get me there. It appears it requires a fixed width column, and I’m doing a responsive design. :( Anyone have any others suggestions?

[TheDoc]

I’d say jQuery is fantastic for responsive design. Your container can be a fluid width with your columns being fixed – much like the Masonry site itself. It might be your only solution.

[Mottie]

@skinnyguy76: Masonry does have fixed width columns, but it can span more than one. Check out the demo and click on one of the blocks to expand it.

[Author]

Posts