jquery - Blank space on the right side of container after lowering resolution -

i have divs in rows inside of container. when size of window changes number of divs in 1 row. in place use div have blank space.

how make width of container fit number of divs in row? here code

html:

<select>  <option value="12">6</option>  <option value="16">8</option>  <option value="24">12</option>  </select> <button>ok</button> <div id='container'></div> 

css:

#container{ border-style: solid;    float:left;  } .square{     float:left;     width: 100px;     height: 100px;     background-color: red;     margin-top: 10px;     margin-left: 10px;     margin-right: 10px;     margin-bottom: 10px; } 

jquery:

$(document).ready(function(){  $("button").click(function(){ var br=0; $('#container').html(''); var k=$('select').val(); br=k/4-1; contained_divs = ''; for(var i=0;i<k;i++)  {     contained_divs += '<div class="square"></div>';      if(i!=0 && i%br==0)     {         contained_divs += '<br>';     }   } $('#container').append(contained_divs); });   }); 

and jfiddle

you should use window resize event. make sure use in $(document).ready well.

$(window).resize(function(){     if(window.innerwidth > 480){         $("#container").css("width","480");     } else if(window.innerwidth < 480) {         $("#container").css("width","380");     /*and keep going till getting result*/     } });