You won't be able to overlap them using float. You'd need to absolutely position the images, making sure that the image in front had a higher z-index setting than the one behind.

This was quick and dirty and only quickly x-browser tested but should work - note the use of position: relative; rather than float. I simply wanted to move the one image not totally remove things from flow.

CSS:

* {padding: 0; border: 0; margin: 0;
}
.box450 {width: 450px; margin: 0 auto;
}
img {display: block;
}

Note: I removed the align left/right from the HTML.

HTML for bigger right image on top:

<a href="images/faline1.jpg">
<img src="images/faline1b" width="225" height="219" border="0" alt="Faline 1">
</a>

<a href="images/faline2.jpg">
<img src="images/faline2" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-219px;left:200px;">
</a>

HTML for smaller left image on top:

<a href="images/faline1.jpg">
<img src="images/faline1b" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:10;">
</a>

<a href="images/faline2.jpg">
<img src="images/faline2" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-219px;left:200px;">
</a>

Hi Iamlost

Thanks for working on this but the images aren't displaying. I work from a Mac and tried all the latest browsers (Safari, Firefox, Netscape and Opera. On Opera it shows the outline of the images even though I have border="0" so I can see that it's working--just can't see the images.

Do you have any idea what would cause the images to not load?

PS. I'm using your last suggestion for left image on top.

[edited by: Lorel at 11:29 pm (utc) on Dec. 19, 2006]

This is a barebones look at what I've done to float one image over another.

<style type="text/css">
.imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; }
.imgB1 { position:absolute; top: 75px; left: 80px; z-index: 3; }
</style>

<img class=imgA1 src="http://full.path.to/imageA.jpg"><img class=imgB1 src="http://full.path.to/imageB.jpg">

Lorel: I can't doublecheck the code on a Mac, unfortunately. In doing my 'test' I simply replaced your image and path [<img src="">] with my own.
Are you sure the image paths/names are correct?

Try remove styling and see if the images appear - if not the images aren't being found. If the images appear put styling back on and comment out the CSS, then un-comment out line by line until the images appear. This may help narrow the problem area.

Iamlost

You were right. I had left off the .jpg on the images for some reason. I stared at that code over and over and couldn't see it till this morning.

It's working now.

Thanks to the others also.

Lori

I have one more problem. I need some text below the top left picture and to the left of the other picture, i.e., nestled in the black space. I tried adding this style tag to the text but it doesn't work:
<div style="position:relative:top:235px;left:15px;">

I tried several different options but the text is always below the bottom most picture by 2 inches.

Is it possible to do this?

Here is the code that places the pictures in the correct position:

<div class="box450">
<a href="images/faline1.jpg"><img src="images/faline1b.jpg" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:10;"></a>
<a href="images/faline2.jpg"><img src="images/faline2b.jpg" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-175px;left:200px;"></a>
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

Ok I think I have the positioning problems figured out. I put the text block below the first picture and the following code aligns everything perfectly. EXCEPT there is now a large blank space below this block (box450) about 3 inches high due to relative positioning. I have several of these boxes to place on the page so I don't want that much wasted space.

Is there any way to eliminate the blank space below each relative positioned box other than putting each section of the page in a position absolute box? I'm not even sure that will work.

<div class="box450">
<a href="images/faline1.jpg"><img src="images/faline1b.jpg" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:1;"></a>
<div class="box200" style="position:relative; top:-25px:left:15px;padding-top:5px;padding-right:5px;">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<a href="images/faline2.jpg"><img src="images/faline2b.jpg" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-345px;left:200px;"></a>
</div>

Playing with relative positioning can get convoluted depending on the code around and after.

In this instance (my example) you are moving the second larger image up and to the right. The natural flow does NOT account for the move and continues on as if the second larger image were still in its original in-flow position.

Thus the text needs to be 'moved' as well. I enclosed it in a <p> and moved it up the height of the larger image which places it directly under the smaller image. I also specified a width (the width of the div minus the width of the larger image) so the text will remain visible.

However this leaves even more 'blank' space before any subsequent natural flow content. I have added a border to the containing div which shows the empty space vacated by relatively positioning the image and text.

CSS:

* {padding: 0; border: 0; margin: 0;
}
.box450 {width: 450px; margin: 0 auto; border: 2px #000 solid;
}
img {display: block;}

HTML:

<div class="box450">

<a href="images/faline1.jpg">
<img src="faline1b.jpg" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:10;">
</a>

<a href="images/faline2.jpg">
<img src="faline2.jpg" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-219px;left:200px;">
</a>

<p style="position: relative; top: -372px; width: 200px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra odio nec augue. Donec dolor. Sed et est. Maecenas libero mi, ultricies non, condimentum ac, auctor at, ipsum. Quisque purus orci, aliquam a, ornare vel, fringilla sed, massa. Aenean quis lectus. In sit amet libero. Proin porta iaculis magna. Proin semper risus vel risus.
</p>

</div>

In standards compliant browsers adding an explicit height to the containing div (assuming you know approximately how much text) neatly solves this problem. In at least some IE(win) versions with their auto-expanding height the problem persists.

One possible IE work-around is to use conditional statement(s) and a negative bottom-margin equal to the height of the larger image (372px) minus any 'extra' text. Note that if the containing div has a border or a differing background to surrounding or subsequent content the result is unsightly. Note that I have not x-tested IE for quirks/standards/versions differences.

The biggest problem with supplying code suggestions is that what works well in isolation may not be the best solution given the rest of the code. And the difficulties with extant non-standards compliant versions. Oh, the joy of web design :-)

Thanks Iamlost.

Adding height to the div box fixed it. I added it to the div as a style as every box has different heights.

It looks ok on all the mac broswers (except the padding at bottom is different in each one).

I'll check windows later.

thanks much!