Cómo evitar envolver en CSS float

Tengo una página con 2 columnas una al lado de la otra (definidas ambas por float: left).

Mi problema es que cuando escala el navegador para que sea más pequeño, la columna de la derecha se colocará debajo de la columna de la izquierda.

¿Cómo puedo evitar esto? y todavía para que estén de lado a lado sin importar el tamaño de la pantalla.

Gracias

Haga que el contenedor primario tenga un ancho fijo o establezca el desbordamiento en auto. Por ejemplo, si sus dos columnas son de 200px de ancho

Alternativamente, si desea que cambien de tamaño con el navegador, deberá definir el ancho en porcentajes. Asi que:

 .div1 { float:left; width:49%; background:red; } .div2 { float:left; width:49%; background:orange; } 

Algunas personas usarían el 50% aquí, tiendo a no