Скрипт меняет размер div, игнорируя css ⇐ Html

[Anonymous]

Пару дней назад это же сообщество помогло мне создать скрипт для отображения случайных изображений из массива в 4 элементах div. Каждое изображение менялось при обновлении и/или по таймеру.

Все работало нормально, пока я не решил использовать его в сочетании с макетом CSS, над которым я работал.
HTML:

Код: Выделить всё

CSS:

Код: Выделить всё

body{
width: 100%;
height: 100%;
background-color: #404040;
}
.box{
position: relative;
width: 20%;   /* desired width */
background-color: #ffb3b3;
border: 10px solid #fff;
}
.box:before{
content: "";
display: block;
padding-top: 100%;  /* initial ratio of 1:1*/
}
.box img{
width: 100%;
}
/* Positions */
#square_1{
position: absolute;
margin-top: 2%;
margin-left: 42%;
z-index: 90;
}
#square_2{
position: absolute;
margin-top: 22%;
margin-left: 2%;
z-index: 100;
}
#square_3{
position: absolute;
margin-top: 48%;
margin-left: 27%;
z-index: 100;
}
#square_4{
position: absolute;
margin-top: 34%;
margin-left: 73%;
z-index: 100;
}

Вот демонстрация того, каким должен быть макет:
http://codepen.io/anon/pen/ZWYywx
JQuery

Код: Выделить всё

/* generate the array of images you want to choose from */
var srcarray = [
"https://s-media-cache-ak0.pinimg.com/736x/7e/1d/4a/7e1d4a1566976f139a2ba58b108e2bce.jpg",
"http://rs832.pbsrc.com/albums/zz248/Paria53/Edited/Random.jpg~c200",
"http://images.freeimages.com/images/premium/large-thumbs/5187/51875120-random-numbers-forming-a-sphere.jpg",
"http://www.islandstone.com/mediafiles/product_records/56_Random_lines_thumb.jpg"
];

function randomizeImages() {
arr = [];
/* select unique images from the array and display them into relevant divs (any number divs allowed, should be less than available images)*/
while(arr.length < $("section div").length){
var randomnumber= srcarray[Math.floor(Math.random()*srcarray.length)];
var found=false;
for(var i=0;i