What happens to the remaining 1px when a div with an odd width is split 50%/50%?

Question

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.

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?

Answer 1

See http://jsfiddle.net/dq323/.

In IE and Firefox, the right side takes up the extra pixel. In Chrome, there's actually a gap between the two.

Setting the background of the container seems like the best way to address this.