Force a floated or absolutely position element to stay “in the flow” with CSS

Question

I'm looking for a way to force floated or absolutely positioned elements to stay in the flow in css. I'm pretty much thinking css is stupid for not having something like flow:on flow:off to keep it in the flow or take it out.

The issue is that I want to have a div element with a variable height, I have a floated image on the left in the div, and I want the div to be at least the height of the picture. I also want it to be at least big enough to hold all the text that IS in the flow (this obviously isn't a problem).

I need the picture to be able to vary in size. I am currently using a jQuery solution, but its acting up. Since I don't feel like debugging, and I feel like there should be some kind of CSS solution, i'm asking.

Anyone know how I can do this?

Answer 1

I usually go with overflow: hidden or overflow: auto.

Answer 2

Instead of using a new element to clear the div at the end, you can add this onto the absolute div css;

overflow: auto;

Obviously IE likes to play differently so you need to supply a width to it too. I am assuming the absolute div has a set width... so you can just set it to that width.

.abs-div {
    position: absolute;
    overflow: auto;
    width: 160px; /* Replace with your width */
}

Answer 3

A hack that may work in your situation is to add another element inside your div after the rest of the content that has the CSS clear property set to "both" (or left, since your image is on the left). eg:

<br style="clear: both" />

This will force the element below the floated elements, which will stretch the containing div.