Nehmen wir an, ich wollte einen Hintergrund dafür schaffendiv#wrapper so dass die Hälfte blau und die Hälfte rot ist mit zwei Divs mitwidth:50%, wie 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;
}

Hier ist eine Geige für das obige Beispiel.

Dies würde die Aufgabe theoretisch lösen. Was würde jedoch mit den verbleibenden 1 Pixel passieren, wenn der Wrapper eine Breite mit einer ungeraden Anzahl von Pixeln hätte?

Wenn zum Beispiel die Breite des Wrappers auf 101px geändert wurde, dann#leftSide wäre 50px breit und#rightSide wäre 50px breit und würde vermutlich eine 1px vertikale weiße Linie in der Mitte hinterlassen.

Wie rendern Browser das normalerweise? Nimmt eine der Seiten die verbleibenden 1px auf? Und wenn ja, was wäre der beste reine CSS-Ansatz, um dies zu umgehen? Meine erste Neigung wäre, den Hintergrund des Wrappers entweder auf Rot oder Blau zu setzen. Gibt es jedoch andere Ansätze?