Digamos que eu quisesse fazer um plano de fundo paradiv#wrapper de modo que metade é azul e metade é vermelho usando dois divs comwidth:50%, igual a:

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

Aqui está um violino para o exemplo acima.

Isso teoricamente resolveria a tarefa. No entanto, se o wrapper tivesse uma largura contendo um número ímpar de pixels, o que aconteceria com o 1px restante?

Por exemplo, se a largura do wrapper fosse alterada para 101 px, então#leftSide seria 50px de largura e#rightSide seria 50px de largura, presumivelmente deixando uma linha branca vertical de 1px no meio.

Como os navegadores normalmente processam isso? Um dos lados absorverá o 1px restante? E, em caso afirmativo, qual seria a melhor abordagem pura de CSS para contornar isso? Minha primeira inclinação seria definir o fundo do invólucro para vermelho ou azul, mas existem outras abordagens?