Forced to move or absolutely position element to stay "in the stream" using CSS

Question

I am looking for a way to make floating or absolutely positioned elements stay in the stream in css. I pretty much think css is stupid because it has nothing like a stream: stream: turn it off to keep it in the stream or pull it out.

The problem is that I want to have a div element with a variable height, I have a floating image on the left in the div, and I want the div to be at least the height of the image. I also want it to be at least large enough to contain all the text that is in the stream (this is obviously not a problem).

I need an image to be able to resize. I am currently using jQuery solution, but it is valid. Since I don’t feel debugging, and I feel that there must be some solution for CSS, I ask.

Does anyone know how I can do this?

Answer 1

I usually use overflow: hiddenor overflow: auto.

Answer 2

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

overflow: auto;

Obviously, IE likes to play differently, so you need to specify the width as well. I assume that the absolute div has the width of the set ... 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 might 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 to the left, since your image is on the left). eg:

<br style="clear: both" />

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