Absolute Positioning and Text Wrap

[Skeer]

This is what I'm having problems with: I have a image that is in an absolute positioned div at the bottom left of my content. I want the content to be full width until reaching the image then wrap around it. Refer to the image for details:



The red is the content div with padding, the black is the div + image, and the white is the content. I want the text to only be in the white spot and wrap around the black.

What I tried is putting the div + image inside the content div and using margin to position, but that causes the whole left part to be indented. I also tried absolute positioned the image and made a div the size of the image space that covers the content but that shifts the height. BTW I need to have a fixed height but I do not know how to force a height, when the insides overflow.

[drhowarddrfine]

This is what 'float' is for.

[Skeer]

I understand float and everything, but my picture is at the bottom of the content not and the top. I also have to have it absolute positioned as it's supposed to stick out. I have tried to add a div the size of the image that covers the content, but unless I have a float: bottom;, it is always at the top. The only way that could be fixed is to add the new div into the indent line break manually, but my page is dynamic thus can't be done.

[drhowarddrfine]

Sorry, I didn't see that you wanted the image to stay at the bottom. Yes, it makes things more complicated. I'll have to think about this.

[Skeer]

Is there a way to set static height? Like min-height working with max-height, even at over flow?

[drhowarddrfine]

The problem, as you may understand, is that in order for the text to move out of the way of the image, it must be inline with the text or take up space like a block. Setting it as absolute removes it from the flow so that won't work. You could set it 'relative' but that would leave a hole wherever it normally would be, maybe, but something to think about.

I think I've seen this done before but I just can't think of how.

[drhowarddrfine]

Is there a way to set static height? Like min-height working with max-height, even at over flow?

I don't understand. .

[Skeer]

I don't understand. .

it's alright, that's not really important. Since the page height is static, the text wrap area is also static. In that case, could we just put a second box inside the content with float: left; and the equivitent of float: bottom;? You see what I'm trying to do here?

[drhowarddrfine]

If you just place the image inside the content, you can set it to 'display:block' which would do the same thing. That you could float left but I don't know if that fits into your scheme of things.