Hey all,

Not sure if I'm using the best solution but it's one that seems easy but for me it's not working right and the other solutions I've tried do the same so I must be missing something in the code.

Basically I am trying to add a drop shadow for the Container DIV. I created a PNG 1000 px Wide x 10 px High and used this as the background for the Wrapper DIV with Repeat Y. It only seems to show the drop shadow on the edges of the head-top DIV and doesn't even extend to the head-bottom part of the header DIV.

Here is the HTML

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flip it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" /></div>
<div id="head-bottom">
<div id="moto"></div>
</div>
<div id="content">This is the main content area</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
The CSS

Code:
@charset "utf-8";


body {
    background-image: url(images/images/bggrad_01.png);
    background-repeat: repeat-x;
    margin-top: 0px;
    padding-top: 0px;
}
#wrapper {
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    background-image: url(images/shadow.png);
    background-repeat: repeat-y;
}
#container {
    width: 942px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    background-color: #FFF;
}
#header {
    width: 100%;
    height: 126px;
    margin-right: auto;
    margin-left: auto;
}
#head-top {
	background-image: url(images/topheaderbg.png);
	background-repeat: repeat-x;
    width: 100%;
    height: 126px;
    background-color: #06266F;
}
#head-bottom {
    width: 100%;
    height: 101px;
    background-image: url(images/bottombannerbg.png);
}
#logo {
    float: left;
    margin-top: 35px;
    margin-left: 27px;
}
#moto {
    float: left;
    margin-top: 10px;
    margin-left: 31px;
    background-image: url(images/moto.png);
    height: 52px;
    width: 414px;
}
#footer {
    background-image: url(images/topheaderbg.png);
    background-repeat: repeat-x;
    height: 300px;
    width: 100%;
}
Many thanks for any help you can give me