CSS3 Shadowbox - on bottom only - html

Question

I am attempting to place a shadow at the bottom of the .top_section of my code. However, I cannot make it work. I have two sections (a top and a bottom), the shadow needs to go bellow the .top_section
Here is the code:
CSS:
.top_section {
background-image: url(../images/background.png);
background-repeat: no-repeat;
}
#boxShadow{box-shadow: 10px 10pxrgba(0, 0, 0, .4);}
.bottom_section {
background-image: url(../images/background.png);
}
HTML:
<div class="container-fluid top_section">
<div id="boxShadow">
<section>
<div class="row-fluid">
<div class="span4 offset4">
<br />
<img src="images/logo.png" width="400" height="400" image alt="image" />
</div>
</div>
<div class="row12">
<h3><p class="text-center">ANIMATOR & DIGITAL ILLUSTRATOR</p></h3>
<h4><p class="text-center">I'M MARK FROM SINGAPORE, I DESIGN & MAKE THINGS MOVE. </p></h4>
<h4><p class="text-center">I AM CURRENTLY FREELANCING AND STUDYING AT ANIMATION MENTOR.</p></h4>
<br />
<br />
</div>
<div class="row-fluid">
<ul class="thumbnails">
<li class="span1 offset4">
<a href="#" class="thumbnail">
<img src="images/MAIL_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
<li class="span1">
<a href="#" class="thumbnail">
<img src="images/DRIBBBLE_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
<li class="span1">
<a href="#" class="thumbnail">
<img src="images/TWITTER_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
<li class="span1">
<a href="#" class="thumbnail">
<img src="images/INSTAGRAM_icon.png" width="50" height="50" image alt="image" />
</a>
</li>
</ul>
</div>
</section>
</div>
</div>
Thank you for your help.

Answer 1

If I understand your question correctly, you can simply achieve it by setting the #boxShadow as:
#boxShadow {
box-shadow: 0px 10px rgba(0, 0, 0, .4);
}
You can take a reading of this for better understanding.

Answer 2

The only problem I see is with your code is just a typo in the boxShadow, otherwise it seems to work fine on this fiddle: typo fixed fiddle
Just needed a space between 10px and rgba.
#boxShadow { box-shadow: 0px 10px rgba(0, 0, 0, .4); }
Is this what you are looking for?
Edited to remove right-side shadow.
Here's a full tutorial of box-shadow, including cross-platform (and older browser) browser-specific prefixes: CSS3 Box Shadow Tutorial

Answer 3

You can try to modify this : http://jsfiddle.net/KyuH7/
<div id="box_wrapper">
<div id="box">
</div>
<div id="box_shadow">
</div>
</div>
#box_wrapper{
width:300px;
height:300px;
position:relative;
z-index:2;
}
#box_wrapper #box{
width:300px;
height:300px;
position:absolute;
background:#FFF;
top:0;
left:0;
z-index:3;
}
#box_wrapper #box_shadow{
width:290px;
height:50px;
background:#CCC;
position:absolute;
bottom:0;
left:5px;
z-index:0;
box-shadow:0px 10px 5px rgba(0,0,0,.1)
}