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:

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.

Answer 2

One possible solution is not set a width to the second DIV (#rightSide) and set float: left; only on the left DIV. Since these are block elements, they will always expand to the full available width if none was set.

In the example, the wrapper width is 3px, the left container has a width of 1-2px (depending on the browser) and the right container will require the leftover horizontal space inside the wrapper:

http://jsfiddle.net/dq323/1/