Another way to divide divs
In this example we can divide divs using inline-block and fontsize:0;
by Arete
HTML
<link rel="stylesheet" href="http://jsfiddle.net/css/normalize.css">
<div class="ms-item">
<div class="ms-item-margin">
<div id="masonry-image-wrapper"></div>
<div id="masonry-text-wrapper"></div>
<div id="masonry-meta-wrapper"></div>
</div><!-- /.ms-item-margin -->
</div>|
CSS
.ms-item-margin {
@extend .corners;
height: 370px;
width: 100%;
margin: 1%;
border: 1px solid;
border-color: $greyborder;
font-size: 0;
}
#masonry-image-wrapper{
background-color: red;
display: inline-block;
width: 100%;
height: 200px;
}
#masonry-text-wrapper {
background-color: green;
display: inline-block;
width: 90%;
height: 170px;
}
#masonry-meta-wrapper {
background-color: blue;
display: inline-block;
width: 10%;
height: 170px;
}