Align image at bottom right of div - text to flow around
This should be simple, but I can't work it out.
I have a div full of text. I want an image to sit in the bottom right corner of the div, with the text to flow around it. That's all ;-) I'd prefer if the image was placed using an <img> tag in the last paragraph of the text. The div is fixed width if that makes a difference.
–––––––––––––––––––––––
| Lots of text here. Lots of |
| text here. Lots of text here |
| Lots of text here. Lots of |
| text here. Lots of text here |
| Lots of text here. Lots of |
| text here. Lots of text here |
| Lots of text here. Lots of |
| text here. Lots of text here |
| text here. Lots ––––––––––|
| of text here | |
| Lots of text | Image |
| here. | |
–––––––––––––––––––––––
Not that I don't believe you, but I'll increase the points, and see if anyone can come up with something that can achieve something similar. I don't mind nested divs, etc. if that's what I need. Nor do I mind making the image the background of the div. Both the image and the div are fixed width, but with all that text, I can't control the height of the div, obviously.
I have played around with putting the image in a relative div of height 250px, with a top of -250px. However, the container div expands unnecessarily (in IE6, at least), and the text still won't flow around it.
you will just have to check where in the text you put the image tag. It is not a great solution (and doesnt use CSS), but it works.
0
Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.
I know where you're coming from, I was simply tring to save you the grief :-)
The problem - in a nutshell - is that in your example you require the text to "float" on the left of the image, but also have the bottom of the image align with the bottom of the container, and there's simply no way to make that happen. Even for 25,000 points :-)
Thanks flow79 (and I forgot to say thanks to seanpowell).
However, it's important to me that the design works whatever the font-size specified in the users' browser, so there's no way I can know where in the text to put the image tag (which is the problem). I need something that is fluid. So, to modify your example by using a large image:
>>but it works.
If you're setting up the page for print only perhaps...
I know where you're coming from, but placing an image at the "precise" point in the text, and allowing for the fact that different monitors, browsers, and default text settings are being used, I would have to say that actually it doesn't work at all :-)
the only way to make it sit right at the bottom is to control where you put it in your text - if you have more or less, you have to place the image inside it differently. Like I said - not a great solution - but it will work if you take the time to plan it properly - believe me - i wish there was a better way, but i cant think of one.
As i have stated over and over throughout this thread - this is NOT a good way to do this. I WISH there was a better CSS manner to do so. But there isnt, so I am offering a possible solution that MAY help out. There is no reason to be so negative about something that does work if you position it properly. I dont know why the putdowns and such are necessary - we are all here to HELP!
flow - you're completely missing the point. I am not being negative and I am certainly not putting you down.
Your solution does not work in a dynamic sitation. It's that simple.
Well, i understand your issues with my solution - with things of this nature, it is difficult to make things work for dynamic content when there is no real solution. I was just posting to try to be helpful and maybe spark some inspiration for others. I will unsubscribe from this thread now, because I'm obviously not helping the situation.
OK, it looks like no-one's been inspired. I'm gonna close the question and stick to top alignment.
Hmm.. Not sure why e-e came up with accepted answer and assisted answer in that order. I intended it to be the other way around - 200 points for seanpowell and 50 points for flow79. Apologies if I got them the wrong way round.
"B: The Expert(s) provided an acceptable solution, or a link to an acceptable solution, that you were able to use, although you may have needed a bit more information to complete the task."
That seems a reasonable description of a "sorry, you can't do it" reply. I'm not blaming you if CSS can't do what I want it to do, but a B seems reasonable. Sorry if you think otherwise.
Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.
CSS just doesn't support the aligning of an object in the bottom right corner, and using floats at the same time...