CSS: Force float to do a whole new line

CSS: Force float to do a whole new line

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 : link

If they are all the same size if works beautifully : link

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

Answer by Evernoob for CSS: Force float to do a whole new line

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 by Dom for CSS: Force float to do a whole new line

Add to

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

Hope it will help

Answer by Alex Gyoshev for CSS: Force float to do a whole new line

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.

Answer by Alex for CSS: Force float to do a whole new line

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

Answer by David Davepermen Sprri for CSS: Force float to do a whole new line

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.

Answer by optimiertes for 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.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 71