Let's say I wanted to make a background for `div#wrapper` so that half is blue and half is red using two divs with `width:50%`, like so:

HTML:

```
<div id="wrapper">
    <div id="leftSide"></div>
    <div id="rightSide"></div>
</div>

```

CSS:

```
body, html, #wrapper {
    width: 100%;
    height: 100%;
}

#wrapper {
    background: white;
}

#leftSide, #rightSide {
    width: 50%;
    height: 100%;
}

#leftSide {
    float: left;
    background: blue;
}

#rightSide {
    float: right;
    background: red;
}

```

[Here is a fiddle for the above example.](http://jsfiddle.net/9tMck/)

This would theoretically solve the task. However, if the wrapper had a width containing an odd number of pixels, what would happen to the remaining 1px?

For example, if the wrapper's width were changed to 101px, then `#leftSide` would be 50px wide, and `#rightSide` would be 50px wide, presumably leaving a 1px vertical white line running down the middle.

How do browsers normally render this? Will one of the sides absorb the remaining 1px? And, if so, what would be the best pure CSS approach to working around this? My first inclination would be to set the background of the wrapper to either red or blue, but are there other approaches?