Can anyone help me figure out why my parent div's children are breaking onto two lines instead of displaying horizontally in one line? I've been using jQuery's outerWidth(true) function to calculate the total necessary width, but something seems off. I've tested it in Chrome, FF, Safari, and IE9. Any ideas on what could be going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>test</title>
<style>
#outer{
width: 100px;//setting up width for outer parent div
height: 200px;
padding: 0px;
}
.inner{ //represent a child element here with inner attribute like age , name etc
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="outer">
<div class="inner">0</div>
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4lt;/div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8lt;/div>
<div class="inner">9</div>//end of child elements
</div>;
<script src="../js/jquery.1.11.0.js"></script>;//link to jquery file
<script>
$(document).ready(function() {
var itemsWidthWithMargin = 0;
$(".inner").each( function(){
itemsWidthWithMargin += $(this).outerWidth(true);
});
$("#outer").width(itemsWidthWithMargin); //final calculation for setting witdth dynamically
alert('itemsWidthWithMargin');
});
</script>
</body>//close the body
</html>