Solved

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

Posted on 2004-08-16
18
3,746 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS: Making responsive table look nicer 7 38
Head to not include on scroll 4 33
ASP.NET Content Page 3 52
center navbar (navigation menu) on web page 3 25
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

730 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