I'm currently attempting to position elements in two rows using mathematical calculations. One of the elements, thumb_container, is a div that is absolutely positioned. Within this container, I am dynamically loading and appending image thumbnails using a JQuery for loop:
for (var i = 0; i < 7; i++) {
var img = new Image();
$(img).addClass("thumb");
$(img).offset({ top: Math.floor(i / 5) * 95, left: (i % 5) * 55 })
img.src = "images/girl_thumb_" + i + ".jpg";
}
Below is the relevant CSS code:
img, div {
position: absolute;
}
#thumb_container {
left: 15px;
top: 370px;
}
When viewed in Chrome, the layout is correct with two rows and five columns perfectly aligned. However, when viewing in IE, the rows cascade downwards to the right instead. See the screenshot below: