obligitary
New Member
Ok I am running into a little problem positioning an image inside a DIV.\[code\]<div id="wholePage"> <img src="http://stackoverflow.com/questions/12809118/theImages/header_shadow_flip.png" id="hF" /> <div id="pageWrapper"><img src="http://stackoverflow.com/questions/12809118/theImages/header_shadow.png" id="bF" /> </div></div>\[/code\]I have the following CSS for both DIVs\[code\]#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;}\[/code\]The CSS for the top shadow, which works just fine. no need to change, is:\[code\]img#hF { position: absolute; left: 50px; top: 56px; z-index:2;}\[/code\]But the bottom footer image is giving me issue and the css is:\[code\]img#bF { position: absolute; left: 50px; top: 1657px; z-index:2;}\[/code\]Two examples of the page is below:\[code\]www.interfaithmedical.com/CheckSite/index.htmlwww.interfaithmedical.com/CheckSite/ms_gynecology.html\[/code\]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)