Question

Ok I am running into a little problem positioning an image inside a DIV.

<div id="wholePage">
     <img src="theImages/header_shadow_flip.png" id="hF" />
     <div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
     </div>
</div>

I have the following CSS for both DIVs

#wholePage {
    position: relative;
    width: 1000px;
    padding: 0 10px;
    padding-top: 35px;
    margin: 0 auto;
}
#pageWrapper {
    position: relative;
    width: 960px;
    padding: 0 10px;
    padding-top: 37px;
    margin: 0 auto;
}

The CSS for the top shadow, which works just fine. no need to change, is:

img#hF {
    position: absolute;
    left: 50px;
    top: 56px;
    z-index:2;
}

But the bottom footer image is giving me issue and the css is:

img#bF {
    position: absolute;
    left: 50px;
    top: 1657px;
    z-index:2;
}

Two examples of the page is below:

www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html

How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn’t position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)

Answer 1

Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren’t tied to your page being 1657px tall every time.

img#bF {
    left: 50px;
    position: absolute;
    bottom: -4px;
    z-index: 2;
}