I want to put two images (photos) into the main body of a 3 column
layout that is done in CSS.
I want one photo to appear in front of the other and with an offset from
the other photo. Something like this:
_ _ __
| _ |
_ | | |
| | |
How should I go about this in CSS?
There is a mainbody div with paragraphs of text. After the second
paragraph I want the photos and then want the rest of the text below the
photos.
I tried puting the images in a div and then wrapping that in a new div
called pics like this:
<div id="pics"><div>
<img id="pic1" src="assets/Images/DSCN0016b.jpg" alt="Upscale
Kitchen Remodel">
<img id="pic2" src="assets/Images/DSCN0003b.jpg" alt="Finished
Project">
</div> </div>
I then tried to style it like so:
div#pics {
position: absolute; padding: 20px 0;
}
#pic2 {
position: relative; top: 80px; right: 150px;
}
Then I put an id on the h3 tag for the text that follows and added
padding at the top to allow for the photos.
h3#addl {
padding: 340px 0 0;
}
This works the way I want in Firefox but in IE it is goofey looking.
You can see the page at www.tnrc.lane-consulting.com
Any ideas on how to fix?
Thanks!
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
