CSS: Force float to do a whole new line

Question

I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.

Here is the page I'm talking about : http://www.stdicon.com/gartoon/

If they are all the same size if works beautifully : http://www.stdicon.com/crystal/

Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)

Answer 1

You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.

Answer 2

Add to .icons div {width:160px; height:130px;} will work out very nicely

Hope it will help

Answer 3

Well, you've got two options:

1. Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
2. Make the items equal in height - either by script or by hard-coding the height in the CSS

Both are limiting - so it's your call.