html - Positioned divs spilling out of container -
i'm trying use this jquery grid plugin, it's not working layout. images stacked on top of each other, seem spilling out of .main, , overlap footer. help? :c
body { padding: 0; margin: 0; color: $fontcolor; background-color: #eee; font: 100% 'open sans', sans-serif; background-color: $main-bg; width: 100%; height: 100%; } .container { margin: 0 auto; width: 80%; height: 100%; } .main { width: 100%; background-color: $content-bg; } .grid-container { background-color: #f9f9f9; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15); margin: 20px auto; position: relative; } .grid-item { display: inline-block; font-size: 0; position: absolute; } .grid-item img { cursor: pointer; display: block; width: 100%; }
<body> <div class="container"> <div class="main"> <div class='grid-container'> <div class='grid-item'> <img alt='' src='stackgrid/example/img/short.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/tall.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/medium.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/tall.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/short.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/medium.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/medium.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/short.jpg'> </div> <div class='grid-item'> <img alt='' src='stackgrid/example/img/medium.jpg'> </div> </div> </div> </div> </body>
make sure initializing stackgrid in window
load
.
also try .reset()
method.
Comments
Post a Comment