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

Question

Jul 26, 2012, 06:02 PM

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

Digamos que quería hacer un fondo paradiv#wrapper de modo que la mitad es azul y la mitad es roja usando dos divs conwidth:50%, al igual que:

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;
}

Aquí hay un violín para el ejemplo anterior.

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

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

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