Hello everyone!
I am having problems with a horizontal list that needs to go on multiple lines if the container is too small. Each list item will have variable height, which is what’s causing problems…
Here is an example: http://jsfiddle.net/lorenzo/HK66f/1/
Is there anyway I can get box 4 to go below box 1, but clearing 1, 2 and 3?
Hopefully someone can help :)
Thanks!
I assume you want box 4 to be immediately under box 1 (and not have the top as the same height as the bottom of box 2, like this: http://jsfiddle.net/HK66f/2/ ).
That’s not possible to do without some super clever scripts. I think you want to look into jQuery Masonry.
Hi Senff, thanks for your answer!
Your css does what I need, however this only works in this particular case. I don’t know how many boxes will fit on each line because it depends on window size, so I don’t know which boxes need clear:both applied…
Actually, what I am trying to achieve is similar to what Senff posted in his fiddle. Every new line should start below the tallest element of the previous line. Masonry seems to be doing some clever fitting which I don’t need :) Of course I can’t arrange elements in rows because I don’t know what the row length will be, as it depends from the window width…
So each block is a different height, but do they all have the same width? Is the container always the same width? If that’s the case, would it make sense to say that every fourth item needs to start on a new line?
