By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,077 Members | 1,790 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,077 IT Pros & Developers. It's quick & easy.

Absolute Positioning and Text Wrap

P: 6
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.
Jun 21 '09 #1
Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
This is what 'float' is for.
Jun 21 '09 #2

P: 6
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.
Jun 21 '09 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jun 21 '09 #4

P: 6
Is there a way to set static height? Like min-height working with max-height, even at over flow?
Jun 21 '09 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jun 22 '09 #6

drhowarddrfine
Expert 5K+
P: 7,435
@Skeer
I don't understand. .
Jun 22 '09 #7

P: 6
@drhowarddrfine
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?
Jun 22 '09 #8

drhowarddrfine
Expert 5K+
P: 7,435
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.
Jun 22 '09 #9

Post your reply

Sign in to post your reply or Sign up for a free account.