Grid system extra space right side

Question

I am trying to make a grid system using jquery masonry. But i have space problem.

I crated this DEMO from codepen.io

If you are using a widescreen computer please narrow browser. When you narrow your browser then a large gap on the right side emerges. Anyone can help me about that problem ?

HTML

<div class="kesif-wrp">
 <div class="kesif-alani">
   <div class="kesif-gonderiler">
     <div class="posts-holder">
     <div class="kesif-gonderi-alani" style="height:300px;">1</div>
     <div class="kesif-gonderi-alani" style="height:400px;">2</div>
     <div class="kesif-gonderi-alani" style="height:400px;">3</div>
     <div class="kesif-gonderi-alani" style="height:200px;">s4</div>
     <div class="kesif-gonderi-alani" style="height:250px;">5</div>
     <div class="kesif-gonderi-alani" style="height:150px;">6</div>
     <div class="kesif-gonderi-alani" style="height:200px;">7</div>
     </div>
   </div>
 </div>
</div>

CSS

body {
    background-color:#323949;
    font-family: 'mstfont' !important;
    margin: 0px ;
    padding: 0px;
    min-width:100%;
    float:left;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
  background-color:blue;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
padding: 0 10px;
  background-color:red;
}
.kesif-gonderi-alani{
  width:300px;
  background-color:#ffffff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -o-border-radius:3px;
  -moz-border-radius:3px;
  margin-right:20px;
  margin-bottom:20px;
  position: absolute;
top: 0px;
left: 0px;
}
.posts-holder {
  box-sizing: border-box;
margin: 10px auto;
opacity: 1;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
}

Answer 1

The large gap in right because of the position : absolute and top,left css property. All the containers are placed as per their applied classes by following the top,left properties.

Well - you need to change the style sheet completely to fix it once for all. First of all - set the width of your container where you want to put them all say 1000px then, place your child containers(div's) by using setting the position and left,top properties. And if you need a responsive design then go for media queries.

Hope this helps..

Answer 2

I solved the problem as follows.

CSS:

.kesif-wrp {
padding: 53px 0 0;
width: 100%;
position: relative;
}
.kesif-alani {
padding: 20px 0 50px;
margin: 36px auto 0;
position: relative;
max-width: 1620px;
min-width: 960px;
}
.kesif-gonderiler {
color: #444;
}
.kesif-gonderi-alani{
  width:300px;
  background-color:#ffffff;
  border-radius:3px;
  -webkit-border-radius:3px;
  -o-border-radius:3px;
  -moz-border-radius:3px;
  margin:10px;
}
.posts-holder {
  position:relative;
margin: 10px auto;
}

JavaScript

$( function() {
var $container = $('.posts-holder');
    $container.masonry({
      isFitWidth: true,
      itemSelector: '.kesif-gonderi-alani'
    });

});

Working DEMO