Ive looked through the other answers on here but keep experiencing the same issue, I'm also very new to webdev.
Im trying to create a <div> with a 960px width that will encapsulate the whole page and then add a drop shadow to it.
Whenever I try the solutions others have posted, all that happens is that the drop shadow is applied to the logo image at the top of the page but nowhere else, i.e. the drop shadow does not continue past the logo and encapsulate the nav bar, content, etc. Here is my code;
<body>
<div=id"page">
<header>
<img src="images/blank_logo.png" height="243" width="744" class="center">
<nav>
<ul>
<li>
<a href="blank.html">blank</a>
</li>
<li>
<a href="blank.html">blank</a>
</li>
<li>
<a href="blank.html">blank</a>
</li>
<li>
<a href="blank.html">blank</a>
</li>
<li>
<a href="blank.html">blank</a>
</li>
</ul>
</nav>
</header>
<div id="content">
<img src="images/ph.jpg" width="475" height="267" class="left">
<img src="images/ph2.jpg" width="478" height="267" class="right">
</div>
</div>
</body>
And here's the CSS;
body {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
#page {
-webkit-box-shadow:0px 5px 10px #1c1c1c;
-moz-box-shadow:0px 5px 10px #1c1c1c;
box-shadow:0px 5px 10px #1c1c1c;
}
Can anyone see where I'm going wrong?
Remove
margin: 0 auto;frombodyand update the typo error as others mentioned (<div=id"page">to<div id="page">)Solution:
working jsFiddle