CSS: Force float to do a whole new line

Use display:inline-block

You may also find vertical-align: top or vertical-align:middle useful.

I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.

Well, if you really need to use float declarations, you have 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 of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.

This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.

<p>&nbsp;</p>