Question: ```
<head>
    <style type="text/css">
        .bar {
            background-color:red;
            height:100%;
            display: inline-block;
            border: 1px solid black;
            float:left;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

</head>
<body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>        
    <div class="bar"></div>        
    <div class="bar"></div>                
</body>
   <script type="text/javascript">
            $( document ).ready(function() {
                 var count = 7;
                 var divs = $('.bar');
                 for (var i = 0; i < divs.length; i++) {
                    $(divs[i]).width((100/count) +'%');
                 }
            }); 
    </script>

```

one of the bars in the above output goes below the first one, i.e. not all bar
accomodate in one line, how do I do that ? is it possible ?

Answer: 
You don't need JS for this at all. A better solution would be to do something like:

```
.container {
  display: table;
  width: 100%;    
}

.bar {
  display: table-cell;
}

```

see example: <http://codepen.io/anon/pen/anfgD>
The border is causing the width to exceed 100%, forcing the last block onto the next line.

You can safely add to fix this:

```
* (box-sizing:border-box;)

```

see <http://www.paulirish.com/2012/box-sizing-border-box-ftw/>