image align right bottom

[beanfair]

Greetings
I am setting up pages for a friend. Her page design has line border on her container div. She wants to have an image aligned to the bottom right of the container div. It needs to be a float so the image will stay bottom right aligned no matter how much text she has on the individual pages.

Here is some of the relevant stylesheet

/* Sets the green border around the logo and content*/
#container  {
	margin-left:  155px;
	text-align: left;
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border: 2px solid #669966; /*this forms the expanding green box */
	line-height: 115%;
	padding-top: 125px;
	width: 700px;
}
.floatimgrightbottom {
	float:right;
	margin:10px, 0px, 10px, 10px;
	vertical-align: bottom;
}

I can of course use absolute positioning but then the image and text overlap. I need it to float so it wraps. Been really banging my head on this one.

Any assistance is appreciated

[Kravvitz]

I'm not entirely sure how you want it to look, but what I might do is give #container position:relative; and some bottom padding and then absolutely position the image.

[beanfair]

Absolute positioning doesn't work for two reasons. First each page had differing amounts of content that the user will be frequently editing. Second the text needs to wrap around the image.
Here is a prototype jpg. this particular page has a left bottom aligned vs right but hopefully it will demonstrate the issue involved.http://70.87.13.10/~sacred/images/proto.jpg
Any assistance is greatly appreciated.

[Kravvitz]

The only way to do that is to put the <img> near the end of the source for that section.

[beanfair]

I have tried that. However, it gets bumped around if they do text editting and in different browsers. I am really surprised how difficult this has turned out to be.
Any other ideas?

[Paul O'B]

Hi,

The only way to do this is as kravvitz said and you have to place the img in the source manually at a point that will give you the effect you want.

There is no other way to do this if you want the text to wrap the image. It would be easy if the image was clear of obstruction as you could absolutely place it at the bottom.

You cannot float the image after the text because it won't wrap and if you drag it up with negative margins then the text won't reflow because it doesn't know about the html that followsd afterwards.

There is no automatic solution to this and is a known layout problem without a real answer other than manually placing the image at a point in the text that gives the effect you want. I have looked at this many times over the years and there just is no automatic way to do it

That's what you get when non web designers design the page image. There are just some things that won't work