container div box shadow

Question

I put a box shadow around the main #container div and although the #footer div is inside the #container div, the shadow is not displayed around #footer

Fiddle here: http://jsfiddle.net/tfua7ebw/

Can you please help me? Thank you.

HMTL code:

<div id="container">

<div id="banner">
</div><!--end of banner-->

<div id="menubar">
<div id="nav">
<ul>
  <li><a href="#">HOME </a></li>
  <li><a href="#">FACILITATI</a></li>
  <li><a href="#">LOCATIE</a></li>
  <li><a href="#">GALERIE</a></li>
  <li><a href="#">TARIFE</a></li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#"><strong>OFERTE</strong></a>
  <ul>
    <li><a href="#">SEMINARII </a></li>
    <li><a href="#">REVELION 2015 </a></li>
    <li><a href="#">CRACIUN 2015 </a></li>
  </ul>      
  </li>
</ul><!--end menu ul-->
</div>
</div><!--end of menubar-->

<div id="content">
<div id="content_text">spozitie in orice perioada a anului noua    camere       duble si un apartamespozitie in orice perioada a anului noua camere duble si un apartamespozitie in orice perioada a anului noua camere duble si un apartamespozitie in orice perioada a anului noua camere duble si un apartame.</div> 
<div id="poze1"><div id="content_div1"><img src="images/apart.jpg" width="233" height="154" />spozitie in orice perioada a anului noua camere duble si un apartame</div>
<div id="content_div1"><img src="images/ski.jpg" width="233" height="154" />spozitie in orice perioada a anului noua camere duble si un apartame</div>
<div id="content_div1"><img src="images/conf.jpg" width="233" height="154" />spozitie in orice perioada a anului noua camere duble si un apartame</div></div>

</div><!--end of content-->



<div id="footer"><p>spozitie in orice per</p>
<img src="images/fbb.jpg" width="102" height="34" />

</div><!--end of footer-->
</div><!--end of container div -->

CSS code:

<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #FFC;
font-family: "Roboto Slab";
background-image: url(images/fulg.jpg);
background-repeat: repeat;
}
#container {
padding: 0px;
height: auto;
margin-left: auto;
margin-right: auto;
width: 100%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 800px;
box-shadow: 3px 3px 2px #000;
}
#banner {
margin: 0px;
padding: 0px;
height: 328px;
width: 800px;
background-image: url(images/banner_original.jpg);
background-repeat: no-repeat;
}
#menubar {
margin: 0px;
width: 800px;
height: 30px;
text-align: center;
vertical-align: middle;
background-color: #663200;
border-top-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FC0;
border-bottom-color: #FC0;
border-bottom-width: 1px;
}

#nav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
position:relative;

}
#nav ul li {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 0px;
margin: 0px;
}
#nav ul li a:hover {
background-color: #FFCC00;
color: #663200;

}

#nav ul li a{
padding: 0px;
margin: 0px;
display: block;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
color: #FC0;
line-height: 30px;
}
#nav ul li:hover > ul {
display: block;


}
#nav ul li:hover {
background-color: #FFCC00;

}
#nav ul ul {
background-color: #FFCC00;
color: #663200;
padding: 0px;
position: absolute;
display: none;
right: 0;
top: 100%;
}
#nav ul ul li {
display: block;

}
#nav ul ul li a{
color: #663200;
}

#nav ul ul li a:hover{
background-color: #FFCC00;
}
#nav ul li:hover a{
color: #663200;

}
#nav ul ul li:hover a{
background-color: #DFB300;
}

#content {
padding: 0px;
height: auto;
width: 800px;
background-color: #663200;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-size: 15px;
font-family: "Roboto Slab";
}
#content_text {
padding: 15px;
color: #FC0;
text-align: center;
}
#content_div1 {
width: 227px;
font-family: "Roboto Slab";
color: #FC0;
text-align: center;
display: inline-block;
vertical-align: top;
padding-right: 18px;
padding-bottom: 10px;
}
#poze1 {
text-align: center;
padding-left:9px;
}
#content_div1 img {padding-bottom:15px;}
#footer {
padding: 0px;
margin: 0px;
background-color: #663200;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FC0;
font-family: "Roboto Slab";
color: #FC0;
font-size: 14px;
vertical-align: middle;
height: 50px;
width: 800px;
float: left;
}
#footer img {float:right; padding-top:7px; padding-right:100px}
#footer p { padding-left:330px; float:left;}
</style>

Answer 1

Try removing float: left; from footer div css. It will help. I tried that.

Answer 2

我看不到您的阴影，但请尝试从#footer中删除float：left，以便页脚在容器中保持蜂鸣状态

Answer 3

You can add:

<br style = "clear:both">

after the closing tag for the footer - and your drop shadow appears.

FIDDLE

Answer 4

remove the float left in #footer

http://jsfiddle.net/senthil2rajan/sympbqx9/

Answer 5

float: left; causes the problem. either remove it or set to none / initial.

Answer 6

remove float:left from footer css jsFiddle

#footer {
padding: 0px;
margin: 0px;
background-color: #663200;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FC0;
font-family: "Roboto Slab";
color: #FC0;
font-size: 14px;
vertical-align: middle;
height: 50px;
width: 800px;   
}

Answer 7

Add <div class="clear"></div> after the closing footer tag in html.

Add .clear {clear: both;} to your css document.

Answer 8

Try this.. may this will help you,

change box-shadow style in #container

http://jsfiddle.net/sympbqx9/2/