I have integrated both Bootstrap and Masonry plugins into my website design. The issue I am facing is that the Masonry plugin box goes under the top Bootstrap bar. I tried adding a margin-top: 50, but this resulted in a horizontal scroll bar appearing.
To see the code and demo, visit: JSFiddle
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* inherit height from window */
html, body {
height: 100%;
}
body {
font-family: sans-serif;
}
/* ---- isotope ---- */
.isotope {
background: #DDD;
height: 100%;
/* inherit height from body */
}
/* clear fix */
.isotope:after {
content:'';
display: block;
clear: both;
}
In the demo, you can see that the first box contains an image, causing the middle box to be placed below the top bar. To ensure proper functioning of the Masonry plugin, the middle div should have a height of 100%. How can I prevent the overlapping of the top and bottom divs with the middle div?
Thank you for your help!