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;
}

```
Since the browser added a horizontal padding to the width, you need to use the box-sizing hack.

Oh, also, subtract 2, not one. Because even though 1px border, well the combined 1px left border, and the 1px right border, the total border width is 2px not 1px. Updated the js.

**See this working jsbin:**  

<http://jsbin.com/eYUDUTa/2/>

**The code (same as the jsbin):**

**page.html**

```
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<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>
</html>

```

**style.css**

```
    body, html {
        height:100%;
        margin:0px;
        padding: 0;
    }        
    .bar {
        background-color:green;
        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;
    }

```

**script.js**

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

```