At 5/21/2007 05:23 AM, jana coyle wrote: >What I am looking for is to have image#1 and image#2 horizontally >next to each other >on the same line. I want the mouse over large image 1 to overlap >both image 1 and >image 2 without displacing them.
Kevin, The reason your images aren't side-by-side is that you've contained the first one in a DIV: (your markup reformatted here for ease of reading): <p> <div id="magnify"> <a class="p1" href="#nogo"> <img src="images/image1.gif" title="Thumbnail image" alt="Thumbnail image" /> <img class="large" src="images/image1large.gif"/> </a> </div> <img border="2" src="images/image2.gif" width="290" height="290" > </p> A DIV is by default a block-level element and therefore will act like a pararaph in starting a new row. See: CSS 2.1 Specification 9 Visual formatting model http://www.w3.org/TR/CSS21/visuren.html I made a quick tweak to your markup and styling: http://juniperwebcraft.com/test/jana-coyle-help2.html _________________________ <a class="p1" href="#nogo"><img src="images/image1.gif" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="images/image1large.gif"/></a> <img border="2" src="images/image2.gif" width="290" height="290" > _________________________ - I've removed the DIV from around the first image. (I could also have changed that div to {display: inline;} but removing it seemed simpler.) - I also removed the P that enclosed the two images which also seemed to be extraneous. - I removed the "magnify" span from around the hyperlinked images, since the anchor element by itself serves as sufficient wrapper. Here's the CSS I added: _________________________ /* ensure enough room for the large image */ div#center { height: 500px; } /* define the bounds of the large absolutely-positioned image */ a.p1 { position: relative; } /* remove the large image from display */ a.p1 img.large { display: none; } /* display the large image on hover */ a.p1:hover img.large { display: inline; position: absolute; left: 0; } _________________________ Tested in Firefox 2 & IE 7 (Windows). Regards, Paul __________________________ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/