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

User · Answer

This is what I did   Seems to work in forcing a new line  but I m not an html css guru by any measure    lt p gt  amp nbsp  lt  p gt

User · Answer

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

User · Answer

Add to  icons div  width 160px  height 130px   will work out very nicely  Hope it will help

User · Answer

Well  if you really need to use float declarations  you have two options    Use clear  left on the leftmost items - the con is that you ll have a fixed number of columns 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

User · Answer

This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better   By using float you are asking the browser to arrange your controls automatically   It responds by wrapping when the controls don t fit the width for their specified float arrangement   float left  float right or clear left clear right clear both   So if you want to force a bunch of float left items to float uniformly into one left column then you need to make the browser decide to wrap unwrap them at the same width   Because you don t want to do any scripting you can wrap all of the controls you want to float together in a single div   You would want to add a new wrapping div with a class like    LeftImages      float left      html   lt div class  LeftImages  gt        lt img    gt        lt img    gt    lt  div gt    This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time  no wrapping      If you still want them to wrap you can give the div a width like width 30  and each of the images the float left  style   Rather than adjust to the largest image it will vary in size and allow the contained images to wrap

User · Answer

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

User · Answer

Use display inline-block  You may also find vertical-align  top or vertical-align middle useful

[html] CSS: Force float to do a whole new line

Examples related to html

Examples related to css

Examples related to css-float