Float ballerino con larghezza del browser

[pictor]

Ho un comportamento strano....

Su un layout liquido

<div id="colSxBox">
    <div id="colSxBoxSpacer"></div>
</div>
<div id="colDxBox">
    <div id="colDxBoxSpacer"></div>
</div>

#colDxBox{
			float:right;
			width:30%;
			height: auto !important;
			height: 856px;
			min-height: 856px;
						background-color: red;
			}
#colDxBoxSpacer{
			margin-right:4px;
			min-height: 856px;
			}
			
#colSxBox{
			float:left;
			width:70%;
						background-color: green;}

#colSxBoxSpacer{
			margin-right:20px;

mi succede che quando redimensiono la finestra ci sono alcuni 'punti' dove il layout non funziona.

Se redimensiono la finestra mi si stringono le due..... ma a certe larghezze della finestra del browser la colonna di sinistra mi va a capo.
Se diminuisco ancora un pò la larghezza della finestra magicamente la colonna sinistra mi ritorna su, accanto alla destra.

Come mai può succedere questo?
E' per colpa degli errori di arrotondamento?

E si può risolvere?.... oppure devo diminuire di un 1% una colonna?