I'm currently working on creating solid blocks using DIVs positioned side by side both horizontally and vertically. I've successfully achieved this when the divs have equal heights. However, an issue arises when a div has larger dimensions; it ends up being positioned below other divs instead of adjacent to them. You can see an example of this problem here: () Below is the code I am using:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<style>
body{margin:0px;padding:0px;font-family:Verdana, Geneva, sans-serif;font-size:12px;}
#container{position:relative;}
#container .box{width:143px;height:143px;background:#eee;padding:5px;position:absolute;}
#container .s21{width:303px;}
#container .s32{width:463px;height:303px;background:#F60;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function relocate(){
var browserWidth = $(window).width();
var defaultWidth = 160;
var yPos = 7;
var xPos = 7;
$('.box').each(function(i, obj) {
elementWidth = $(this).width();
if(xPos + elementWidth > browserWidth){
yPos = yPos + 160;
xPos = 7;
}
$(this).css('top',yPos+'px');
$(this).css('left',xPos+'px');
xPos = xPos + 17 + $(this).width();
});
}
$(document).ready(function(){
relocate();
$(window).resize(function() {
relocate();
});
});
</script>
</head>
<body>
<div id="container">
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box s32" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
<div class="box" id="">
Test
</div>
</div>
</body>
</html>
Thank you in advance for any assistance provided.