I have a layout consisting of responsive boxes which have equal height. They have box-shadow but bottom shadow doesn't appear.
I think it's because overflow:hidden for div#latest which is set to make boxes equal height as it is recommended in One True Layout Method.
HTML Code:
<div id="latest">
<div id="section-header"><h4>NEWS</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
</div>
</div>
<div id="latest">
<div id="section-header"><h4>MOST READ</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
body {
background: #ebebeb;
}
#article-container {
padding: 1em;
}
#article {
padding: 0;
background: #FFF;
height: auto;
margin-bottom: -99999px;
padding-bottom: 99999px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#article figure {
max-width: 100%;
height: auto;
}
#article figure img {
/*height: 30%;*/
}
#article h4 {
padding: 1em;
}
#article h4 a{
text-decoration: none;
color: #000;
}
#article h4 a:hover {
text-decoration: underline;
}
#meta{
color: #ccc;
width:100%;
padding-left: 1em;
}
#meta a {
text-decoration: none;
color: #ccc;
}
#meta a:hover {
text-decoration: underline;
}
#latest {
padding-left:2em;
overflow: hidden;
}
#section-header {
height: 40px;
width:100%;
background: #FFF;
display:table;
border-left: 5px #FFC640 solid;
margin-left: 0;
margin-top:2em;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#section-header h4 {
padding-left: 1em;
vertical-align:middle;
display:table-cell;
}
Here is the screenshot showing how the problem occurs:
P.S. I am using Bootstrap 3.
Aucun commentaire:
Enregistrer un commentaire