Question

I am developing a site and I am running into an issue towards the bottom with the box-shadows on the three different sections. I want the border to show up around all three, but it only shows on the left and right.

Here is the HTML for that section:

<div class="three-cols-row">

<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section01.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section02.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
<div class="three-cols-col three-cols">
<p style="text-align: center;"><img src="https://www.lytyx.com/subdomains/test/websites/mynaturerich.com/wp-content/uploads/2013/02/section03.jpg" alt="" /></p>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. <a href="#">Read More</a></p>

</div>
</div>
<div class="clearboth"></div>

Here is the CSS for that section:

.three-cols-col{ margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }
.three-cols-row { margin:0 auto; width:960px; overflow:hidden; }
.three-cols-row .three-cols-row { margin:0 -16px 0 -16px; width:auto; display:inline-block; }
.three-cols { width:248px; padding: 15px; background: #fff; -moz-box-shadow: 0 0 3px #d4d4d4;-webkit-box-shadow: 0 0 3px #d4d4d4; box-shadow: 0 0 3px #d4d4d4; }

Answer 1

You have two choices:

1. Remove the overflow: hidden from all the parents node, because this is clipping your shadow. In your case, remove it from the following selectors: .row, .column and .three-cols.

2. You can just add some vertical margin to your: .three-cols-col. Instead of: margin: 0 16px 0 16px; you can just put: margin: 16px 16px 16px 16px;.

Both choices were tested on Google Chrome.