Cosa succede al 1px rimanente quando un div con una larghezza dispari viene diviso 50%/50%?

Question

Diciamo che ho voluto fare uno sfondo per div#wrapper modo che la metà è blu e per metà è di colore rosso con due div con width:50%, in questo modo:

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.

Questo teoricamente risolverebbe il compito. Tuttavia, se il wrapper avesse una larghezza contenente un numero dispari di pixel, cosa accadrebbe al restante 1px?

Ad esempio, se la larghezza della confezione sono state modificate per 101px, quindi #leftSide sarebbe 50px ampia, e #rightSide sarebbe 50px largo, presumibilmente lasciando una linea bianca verticale 1px esecuzione nel mezzo.

Come vengono normalmente visualizzati dai browser? Uno dei lati assorbirà il restante 1px? E, in tal caso, quale sarebbe il miglior approccio CSS puro per aggirare questo problema? La mia prima inclinazione sarebbe quella di impostare lo sfondo del wrapper sia rosso o blu, ma ci sono altri approcci?

Answer 1

Vedere http://jsfiddle.net/dq323/.

In IE e Firefox, la parte destra occupa il pixel in più. In Chrome, c'è in realtà un divario tra i due.

Impostare lo sfondo del contenitore sembra il modo migliore per risolvere questo problema.

Answer 2

Una possibile soluzione non è impostata su una larghezza al secondo DIV (#rightSide) e impostare float: left; solo sulla sinistra DIV. Poiché si tratta di elementi di blocco, verranno sempre espansi sull'intera larghezza disponibile se nessuno è stato impostato.

Nell'esempio, la larghezza involucro è 3px, il contenitore sinistra ha una larghezza di 1-2px (a seconda del browser) e il contenitore destra richiederà lo spazio orizzontale rimanente all'interno dell'involucro:

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