Auto height on floats

HTML & CSS
1

hi guys

quick question i have some floats floating side by side and they work fine but when i add too much text into one box the box beneath it does not float directly under it, i am adding a screen shot of the problem, the floats are outlined to help you see what is going on

here is my css

.floaty {
width: 247px;
float:left;
padding-right: 10px;
padding-bottom: 5px;
margin-bottom: 5px;
}

.floaty img {
border: #8f0c12 2px solid;
}
2

Hi,

Floats float as far as they can one way or the other from where they are. If something is in the way they snag on it which is what is happening in your example above.

You would need to set exact heights on every float (and hide the overflow for IE6) if you want then to align automatically in rows.

If you want different height floats then you will need to either float them in pairs and then set a clearing element after every second float so that a new row starts. It is no good just adding clear:both to the third float because the fourth float would still snag.

Or alternatively us inline-block instead of floats although it is a little more complicated and requires hacks for older browser support.

3

That’s how floats work. A box that has float:left will be shifted as far to the left as it can go. That means until it reaches the padding edge of the parent or until it bumps into another float (which is what happens in your case).

You can add clear:left to the box to make it drop below the taller one, but that requires you to know which ones will be taller and which ones will go below them.

Edit:

Too late, as usual.

4

My husband ran into this recently with a list of addresses of varying heights. These were li’s inside a ul. What we did was give them all a min-height in em units, and height to IE6, so that snagging stopped and also if text was enlarged the height wouldn’t cut off content.

Paul, do you have a version of inline-block but with differently-heighted containers?

5

You would still need to ensure that the height was greater than you ever need otherwise it would still snag :slight_smile:

Paul, do you have a version of inline-block but with differently-heighted containers?

There’s this one although its a couple of years old.:slight_smile:

6

oh rite…i just specified a height to it…im not the one who will be adding content to the floating boxes so hmmmm :stuck_out_tongue:

7

Yes this is what we did… looked at the longest address and measured its height, and used that as our min-height.

mari, that you are not the one adding the content, that may be a problem unless you know the maximum height allowed. Or maximum number of characters.

If you don’t know this max height, then another solution might be necessary…
would display: table be possible here without adding a ton of classes to the HTML?

8

would display: table be possible here without adding a ton of classes to the HTML?

No because table cells can’t wrap to another line :slight_smile: (and IE7 doesn’t support display:table anyway).

The inline-block solution is the best solution for variable height adjacent containers that wrap to many lines.:slight_smile: