CSS: Force float to do a whole new line

html css css-float
Paul Tarjan picture Paul Tarjan · Sep 25, 2009 · Viewed 139.8k times · Source

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

Alex Gyoshev picture Alex Gyoshev · Sep 25, 2009

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.

Related questions

How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More
Split Div Into 2 Columns Using CSS

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows: <div id="content"> <div id="left"> <…

Read More