<p>In designing a fluid layout, how do you use borders without ruining the layout.</p>

<p>More specifically, I have a HTML widget which consists of five divs.  I would like the five divs to take up all the room in the containing element.  I would also like to have a 1px border around each.</p>

<p>I tried:
.box { float: left; height: 100%; width: 100%; border: 1px solid red; }
This doesn't work:  there will be an extra 10px in width causing the boxes to wrap.  Reducing the width percentage doesn't work as it will not take up the correct amount of space and for certain page sizes, will still wrap.</p>

<p>Whats the proper way to manage the interaction between these elements?</p>

Only put
```
width: 100%
```
on the outermost div, and don't put a border on it.  If you do this, then the inner boxes will fill the space (assuming you haven't floated them or anything) since they're block elements, and you won't have to worry about borders adding to the total size.
If you really need the appearance of five solid single pixel nested borders, you can do something like this (with properly semantic names, hopefully):
```
```
<div class="one">
    <div class="two">
        <div class="three">
        etc.
        </div>
    </div>
</div>

<style>
.one {
    width: 100%;
}
.two {
    border: 1px solid red;
    padding: 1px;
    background: red;
}
.three {
    border: 1px solid red;
    background: white;
}
</style>
```
```
As you can see, you can fake the second border using padding and background colors on the second div (might even cut down on the total number of divs by doing this; just remember you can't pad the outmost div without screwing up your width).