¿Qué sucede con el 1px restante cuando un div con un ancho impar se divide 50%/50%?

Question

Digamos que quería hacer un fondo para div#wrapper modo que la mitad es de color azul y la otra mitad es de color rojo con dos divs con width:50%, así:

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.

Esto teóricamente resolvería la tarea. Sin embargo, si el contenedor tiene un ancho que contiene un número impar de píxeles, ¿qué pasaría con el 1px restante?

Por ejemplo, si el ancho de la envoltura se cambiaron a 101px, entonces #leftSide habría 50px de ancho, y #rightSide habría 50px de ancho, presumiblemente dejando una línea blanca vertical 1px corriendo por el medio.

¿Cómo suelen hacer esto los navegadores? ¿Alguno de los lados absorberá el 1px restante? Y, de ser así, ¿cuál sería el mejor enfoque de CSS puro para solucionar este problema? Mi primera inclinación sería establecer el fondo de la envoltura en rojo o azul, pero ¿hay otros enfoques?

Answer 1

Ver http://jsfiddle.net/dq323/.

En IE y Firefox, el lado derecho ocupa el píxel extra. En Chrome, en realidad hay una brecha entre los dos.

Establecer el fondo del contenedor parece ser la mejor manera de abordar esto.

Answer 2

Una posible solución no se establece una anchura a la segunda DIV (#rightSide) y establece float: left; sólo en el DIV izquierdo. Como estos son elementos de bloque, siempre se expandirán al ancho total disponible si no se estableció ninguno.

En el ejemplo, la anchura de envoltura es 3px, el recipiente de la izquierda tiene una anchura de 1-2px (dependiendo del navegador) y el recipiente derecho requerirá el espacio horizontal sobrante en el interior de la envoltura:

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