Within my container, I have divs arranged in rows. As the window size changes, so does the number of divs in each row. However, this results in blank spaces where the divs used to be.
Is there a way to automatically adjust the width of the container based on the number of divs in a row? Here is the code snippet:
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);
});
});
Check out the jfiddle for live example.