Clear left if it's wider then container in CSS

HTML & CSS
1

I have a fiddle to demonstrate the problem I’m trying to solve:

As you can see in the first row the third column is aligning to the right (because the column on the farthest left is taller then the column immediately to the right of it).

I know if I do a clear: both; after the 2nd column to get the final column to float all the way to the left, but since I’m trying to do more responsive design it would be best if I could do it without clears (since if the container became big enough I would want the column to come up flush with the rest of the columns instead of clearing).

Does anyone know how to solve this problem? I hope it made sense.

2

I’d not add any floats at all when you have the total layout being a mere 500 pixels wide. Instead, I’d look for breaking points in your design, e.g. if a viewport is wider than n pixels, then add a float and work your way up to the biggest viewport you want to support.

Here’s a nice article that may help: http://www.netmagazine.com/tutorials/determining-breakpoints-responsive-design

3

Instead of float: left, use display: inline-block:

.column {
    width: 205px;
    border: 1px solid red;
    [COLOR="#FF0000"]display:inline-block;[/COLOR]
    min-height: 90px;
}

I’m a real fan of inline-block these days. :slight_smile:

4

I love Inline-Block too but it doesn’t work in IE7 unfortunately :frowning:

5

Yep, but there’s an easy workaround for it in IE7. I keep messing up the explanation, though, so I’ll let Paul O’Brien explain it for you instead. :slight_smile: