Jump to content

How To Make Text Wrap Around Image In Lower Corner Of A Div?


cdesign@airmail.net
 Share

Recommended Posts

I am pulling my hair out trying to find a solution for getting text to wrap around an image that is positioned in the lower corner of a Div.Here is a test page that shows the problem.Note that the main 'wrapper' Div resizes when the window is resized and that the text wraps within it. Corners 1 and 2 are working just right. They have been 'floated' and text wraps nicely around them. However, corners 3 and 4 do not wrap. They are using absolute positioning which apparently negates the text wrap (presumably because elements that are positioned absolutely are 'removed' from the normal page flow).Here is another solution.This test page uses float and a negative top margin (-50px) to get the corner images into place. But again, the text does not wrap.I need this solution to allow the window to be resized and have images 3 and 4 remain fixed in the lower corners.Is there a way to do this with HTML/CSS? I also should note that I can't rely on Javascript/DOM either.Thanks much. John

Link to comment
Share on other sites

I am pulling my hair out trying to find a solution for getting text to wrap around an image that is positioned in the lower corner of a Div.Here is a test page that shows the problem.Note that the main 'wrapper' Div resizes when the window is resized and that the text wraps within it. Corners 1 and 2 are working just right. They have been 'floated' and text wraps nicely around them. However, corners 3 and 4 do not wrap. They are using absolute positioning which apparently negates the text wrap (presumably because elements that are positioned absolutely are 'removed' from the normal page flow).Here is another solution.This test page uses float and a negative top margin (-50px) to get the corner images into place. But again, the text does not wrap.I need this solution to allow the window to be resized and have images 3 and 4 remain fixed in the lower corners.Is there a way to do this with HTML/CSS? I also should note that I can't rely on Javascript/DOM either.Thanks much. John
It's not flexible, but you can just add this to the <p> style declaration:margin: 0px 52 px 0px 52 px;Or any other number that's bigger than the picture size of 50x50px. Probably best create a new class of p though, so that not all your text has that margin.
Link to comment
Share on other sites

It's not flexible, but you can just add this to the <p> style declaration:margin: 0px 52 px 0px 52 px;Or any other number that's bigger than the picture size of 50x50px. Probably best create a new class of p though, so that not all your text has that margin.
That does not allow the text to wrap around the boxes as I've stated is required. I know I can add a margin. Is this just not possible with current html and CSS 2.x??
Link to comment
Share on other sites

I looked at your link and seen what you are trying to do. I was messing around with it useing image float left or right and the top two work great. But when I got to the bottom two I could make the text wrap somewhat. I am looking at some of my other samples and see if I can find something to work were the images nest at the bottom of the div.

Link to comment
Share on other sites

That does not allow the text to wrap around the boxes as I've stated is required. I know I can add a margin. Is this just not possible with current html and CSS 2.x??
Closer but no cigar, it may not be 100% what you need because the draw back is the image needs to be inide the <p>then what happens is your images get pushed away from the div table outline so I compensated it with a - negitive px against the <p> margins.I hope this gives you some ideas,<style type="text/css">* { margin: 0px; border: 0px; padding: 0px;}body { background-color: beige;}.wrapper { width: 70%; background-color: brown; margin: 30px auto; position: relative;}.num1 { float: left; margin-right: 20px; margin-left: -10px; margin-bottom: 10px; margin-top: 0px;}.num2 { float: right; margin-left: 20px; margin-right: -10px; margin-bottom: 10px; margin-top: 0px;}.num3 { float: right; margin-left: 20px; margin-right: -10px; margin-top: 10px; margin-bottom: -20px;}.num4 { float: left; margin-right: 20px; margin-left: -10px; margin-top: 10px; margin-bottom: -20px;}p { padding: 10px; padding-bottom: 0px; padding-top: 0px;}</style></head><body><div class="wrapper"> <p><img class="num1" src="num1.png" width="50" height="50" /> <img class="num2" src="num2.png" width="50" height="50" /> This is some of the best text ever written. Another line of text. Another amazing line of text. Text can be fun. Yes.. very very fun. This is text. Another line of text is some of the best text ever written. Heaven is a line of text. Another amazing line of text. Text can be fun.</p> <p>This is some of the best text ever written. Another line of text. Another amazing line of text. Text can be fun. Yes.. very very fun. <img class="num3" src="num3.png" width="50" height="50" /> <img class="num4" src="num4.png" width="50" height="50" />This is text. Another line of text is some of the best text ever written. Heaven is a line of text. Another amazing line of text. Text can be fun. </p></div></body>
Link to comment
Share on other sites

Try this one, if you need to and more text to the bottom paragraph then,,view code type your text then view it. if the images seem to float away from the bottom go back the the code view grab the code for img 3 & 4 and drag it further down in the text of the paragraph.That is about the best I can come up with<style type="text/css">* { margin: 0px; border: 0px; padding: 0px;}body { background-color: beige;}.wrapper { width: 70%; background-color: brown; margin: 30px auto; position: relative;}.num1 { float: left; margin-top: -5px; margin-left: -10px; margin-right: 5px;}.num2 { float: right; margin-top: -5px; margin-right: -10px; margin-left: 5px;}.num3 { float: right; margin-bottom: -15px; margin-left: 5px; margin-right: -10px;}.num4 { float: left; margin-bottom: -15px; margin-right: 5px; margin-left: -10px;}p { padding: 10px;}</style></head><body><div class="wrapper"> <p><img class="num1" src="num1.png" width="50" height="50" /> <img class="num2" src="num2.png" width="50" height="50" /> This is some of the best text ever written. Another line of text. Another amazing line of text. Text can be fun. Yes.. very very fun. This is text. Another line of text is some of the best text ever written. Heaven is a line of text. Another amazing line of text. Text can be fun.</p> <br /> <p>This is some of the best text ever written. Another line of text. Another amazing line of text. Text can be fun. Yes.. very very fun. This is text. Another <img class="num3" src="num3.png" width="50" height="50" /> <img class="num4" src="num4.png" width="50" height="50" />line of text is some of the best text ever written. Heaven is a line of text. Another amazing line of text. Text can be fun. also even more funn</p></div></body>

Link to comment
Share on other sites

Try this one, if you need to and more text to the bottom paragraph then,view code type your text then view it. if the images seem to float away from the bottom go back the the code view grab the code for img 3 & 4 and drag it further down in the text of the paragraph.
Well.. thanks for the valiant effort. I think that this is just something that HTML/CSS cannot currently do. I need to have the four corner graphics firmly anchored and they need to stay there even when the window is resized. And the amount of text will vary, so embedding the bottom graphics in the <p> is not practical and produces erratic movement of the corner graphics when the window is resized. It's surprising to find this limitation in CSS2. I would think that many people would want to anchor a graphic to the lower right corner while preserving text wrap...TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTGGGGTTTTTTTTTTGGGGTTTTTTTTTTGGGG
Link to comment
Share on other sites

Well.. thanks for the valiant effort. I think that this is just something that HTML/CSS cannot currently do. I need to have the four corner graphics firmly anchored and they need to stay there even when the window is resized. And the amount of text will vary, so embedding the bottom graphics in the <p> is not practical and produces erratic movement of the corner graphics when the window is resized. It's surprising to find this limitation in CSS2. I would think that many people would want to anchor a graphic to the lower right corner while preserving text wrap...TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTGGGGTTTTTTTTTTGGGGTTTTTTTTTTGGGG
I kind of figured that is what you were really trying to do. I will think about it on my drive home, I even thought about div's inside of the main div to anchor them or float them like a table inside of a table but vert align the inside table to bottom and left or right and have the image in the cell. I like chanlannges like that also. Let me see what I can ponder up the next hour, and see how much css div can be manipulated in such a why to do that. I will most likely post in the next 1-2 hours after I get home.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...