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: 
Alright, I made a very minor changes to the JS, then I set the parent of `.bar` to `100%`, which will force it to take up `100%`, as it had been set to `100%` of nothing - which is `0`. 

Additionally, using `box-sizing` will force the `borders` to be calculated into the `width`/`height` of the `divs`.

[**jsFiddle here**](http://jsfiddle.net/J9GqL/)

**Updated JS** - *note the changes..*

```
$(window).load(function(){
$(document).ready(function () {
    var count = 7;
    var divs = $('.bar');
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).width((100 / count - 2) + '%');
    }
});

```

**Updated CSS**

```
.bar {
     background-color:red;
     height:100%;
     display: inline-block;
     border: 1px solid black;
     float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
    height:100%;
    margin:0px;
}

```
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/>