Recommendations for how to place this image?

[mrtopher]

I am in the process of slicing a design and putting it in HTML and am almost done but I'm struggling with how to place one final image.

This is what the design is supposed to look like:
http://www.practisinc.com/dev/pedCare/interior.html

I've got it mostly sliced and built out:
http://ns3.practisinc.com/~pediatric...om/content.php

I'm struggling with how to place the image of the girl at the bottom left of the content like it is on the image. The trouble I'm having is that it overlaps the border of the content background and it blends in with the bottom of the curved corners box. I've contemplated absolute positioning and other things but nothing has worked so far.

Can anyone make any recommendations for how I should go about placing this image?

[samanime]

I had a similar issue. The easiest is to just make her image incorporate the border and everything.

Then you would need 2 bounding boxes, 1 outside that is invisible holding the stuff you have, sorta like this:
[code]
===============
| =============|
| = content goes here |
|ggg more content goes|
|ggg here |
|ggg ===========|

The 'g' represent the girl.

Hope that helps.

[Siebird]

I have done something similar to this, and this worked fine. Not sure if it's the "correct" way, but it works. Take a look at my footer, I positioned the logo to sit right on top of line.

#footer .girl {
	float: left; 
	position: relative; 
	margin: 0; /*play with margins */
	top: -Xpx; /* use negative position  */ 
left: -Xpx; /* use negative position */ }

Place the image right below the <div id="footer">

<div id="footer">
			<img class="girl" src="girlfilepath" height="x" width="x" alt="Happy Girl">
	</div>

[mrtopher]

Very cool!! Looks like that does the trick... there only a couple of odd things. First, the image is throwing off the centering of the nav and copyright at the bottom of the page. I thought floating it would take it out of the flow, but apparently not. Second, it's adding a lot of empty space at the bottom of the page in IE and FF but not in Safari.

http://ns3.practisinc.com/~pediatric...om/content.php

Any ideas how to fix these two little bugs?

[Siebird]

Try removing the float: left, and then play with the positioning some more. (i.e. left -Xpx)