css justify boxes
HTML
<div class="container">
<div class='element'>Box1</div>
<div class='element'>Box2</div>
<div class='element'>Box3</div>
<div class='element'>Box4</div>
<div class='element'>Box5</div>
<div class='element'>Box6</div>
</div>
<br/>
<input id='new_div' type='button' value='add div'>
CSS
* {
margin: 0;
padding: 0;
}
.container {
background: orange;
overflow: auto;
display: block;
min-width: 165px;
}
.container > div {
margin: 20px 0 20px 0;
width: 164px;
height: 100px;
color: #fff;
text-align: center;
background: blue;
float: left;
}
JavaScript
$(function() {
// Call function when DOM is ready
settingsAlignment();
$(window).resize(function() {
// Call function on window resize
settingsAlignment();
})
$('#new_div').click(function() {
box_number = $('.element').size();
box_add = box_number + 1;
$('.container').append($('<div class="element">Box'+ box_add + '</div>'))
settingsAlignment();
})
function settingsAlignment() {
// calculation of ul's padding-left and li's margin-right
var settingsUl = $('.container');
settingsLi = $('.element');
ul_width = settingsUl.outerWidth(true);
item_width = settingsLi.width();
min_gap = 7;
effective_item_width = item_width + min_gap;
items_in_row = Math.floor((ul_width - min_gap) / effective_item_width);
gaps_sum = ul_width - items_in_row * item_width;
new_gaps = gaps_sum / (items_in_row + 1);
item_margin = Math.floor(new_gaps);
row_width = (item_width + item_margin) * items_in_row - item_margin;
console.log(row_width + '= row_width');
console.log(ul_width + '= ul_width');
ul_left_padding = Math.ceil((ul_width - row_width) / 2);
console.log(ul_left_padding + '=ul_left_padding');
settingsUl.css('padding-left', ul_left_padding + 'px');
settingsLi.css('margin-right', item_margin + 'px');
console.log(settingsLi);
}
});