Hello all,
Let's say you have a website where the body's background color is red and a content area with a white background that is 1,000 pixels wide. Now let's say you want a drop shadow on the content area that is darkest at the juncture of the content area and the red background, and gets less opaque as it goes off the the left on the left side and the right on the right side. It basically looks like this:
So my strategy is to make the background color of the body red and grab only the shadow in photoshop with a width of ~47px and a height of 1px. My question is:
How do I go about inserting that onto my website such that the browser's horizontal scroll bar only shows up when it's reached 1,000 pixels and not when it's reached 1,000 + 47 + 47 (the width of the content area plus the width of the two shadows).
I'm sure this is a common question, but I really suck at phrasing these things.
Thanks!
Edit: sorry for the lack of code. That's not usually my style. So here we go:
HTML:
<div id="mainwrapper">
<div id="left_shadow"></div>
<div id="right_shadow"></div>
</div>
CSS:
#mainwrapper {
width:1000px;
height:100%;
margin-left:auto;
margin-right:auto;
background-color:#e8e8e8;
position:relative;
}
#left_shadow {
position:absolute;
top:0;
bottom:0;
left:-47px;
width:47px;
background:url(/images/leftshadow.png) repeat-y;
}
#right_shadow {
position:absolute;
top:0;
bottom:0;
right:-47px;
width:47px;
background:url(/images/rightshadow.png) repeat-y;
}
With this setup, if I shrink the browser window down to 1,095 pixels, it doesn't have a horizontal scroll bar. If I shrink it to 1,094px, it has a horizontal scroll bar because it's recognize those absolutely positioned shadows as part of the content area. My question is: how do I make it so that the scroll bar only shows up when it hits the gray center (at 1,000px)? Thanks again, guys.
