Solved

Align image at bottom right of div - text to flow around

Posted on 2004-08-16
18
3,736 Views
Last Modified: 2008-02-01
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.             |                 |
 –––––––––––––––––––––––
0
Comment
Question by:mark8barnes
  • 7
  • 6
  • 5
18 Comments
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 200 total points
ID: 11812275
No can do I'm afraid.
CSS just doesn't support the aligning of an object in the bottom right corner, and using floats at the same time...
0
 
LVL 1

Author Comment

by:mark8barnes
ID: 11812623
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.
0
 
LVL 13

Accepted Solution

by:
flow79 earned 50 total points
ID: 11812657
<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="">
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11812682
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 :-)
0
 
LVL 1

Author Comment

by:mark8barnes
ID: 11812717
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:

<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="" height="200">
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

The text no longer goes to the bottom of the container div.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11812718
>>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 :-)
0
 
LVL 13

Expert Comment

by:flow79
ID: 11812729
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11812730
We both posted at the same time Mark :-)

I'm glad you're seeing the inherent problem we're facing...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11812741
>>the only way to make it sit right at the bottom is to control where you put it in your text

That's completely wrong. You don't have control over that whatsoever. Sorry...
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 13

Expert Comment

by:flow79
ID: 11812806
i understand the issue that different resolutions and font sizes on a monitor may screw it up, but all things being even - my solution does work.  

depending on the amount of text in the div, you must place the proper amount after it.

my first example:
<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="">
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

has 5 lines of text.

A new one (with much more text and a different size image) can also make the text align along the bottom - depending on where you put it in the text.

<div style="width: 300px; border: 1px #000000 solid;">
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
<img src="" align="right" alt="" height="200">
Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World! Hello World! Hello World!
</div>

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!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11812859
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.
0
 
LVL 1

Author Comment

by:mark8barnes
ID: 11812880
But <div style="font-size:150%;width: 300px; border: 1px #000000 solid;"> doesn't work. (Simulating somone who has Text-Size=Large in their browser)

I appreciate your help, and understand your point. It's just that I'd prefer to redesign the page than to have a static solution.
0
 
LVL 13

Expert Comment

by:flow79
ID: 11812929
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.
0
 
LVL 1

Author Comment

by:mark8barnes
ID: 11830256
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.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11830272
A B grade because it's clearly our fault the browsers don't do what you need them to.

It has nothing to do with inspiration. The simple answer to this long winded thread is the same now as it was then http:#11812275
0
 
LVL 13

Expert Comment

by:flow79
ID: 11830277
you did only assign me 50 (i got a total of 150 points = 50 x 3 (for the B)).  You accepted my answer, but gave sean more points.  just like you wanted.  
0
 
LVL 1

Author Comment

by:mark8barnes
ID: 11848273
"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.
0
 
LVL 13

Expert Comment

by:flow79
ID: 11851451
http://www.experts-exchange.com/Web/Web_Languages/CSS/help.jsp#hi54

see that about the "you cant do that" response.  In EE, that is seen (if valid) as a good answer, and as such deserves an A
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now