Dependiendo del nivel de soporte de los navegadores que necesita, una consulta de medios simple puede resolver su problema:
<!doctype html>
<html>
<head>
<style>
/* SET THE DEFAULT RULES FOR SHORT SCREENS */
.bottom-floaty {
height:200px;
width: 400px;
margin: 15px; padding: 10px;
outline: 1px dashed #aaf;
}
/* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */
@media all and (max-height: 500px) {
.bottom-floaty { float:left; }
}
</style>
</head>
<body>
<div class="bottom-floaty">
I'm a sometimes floaty div
</div>
<div class="bottom-floaty">
I'm also a sometimes floaty div
</div>
</body>
</html>
Aquí es el efecto que veo con lo siguiente:
Las consultas de medios de CSS3 le permiten establecer las reglas css que desee en función del alto de la ventana gráfica. The w3c has lots of information about media queries.
Un fragmento relevante con respecto a la altura de la ventana gráfica:
La característica de ‘altura’ medios de comunicación describe la altura de la zona de visualización específica del dispositivo de salida. Para medios continuos, esta es la altura de la ventana gráfica, incluido el tamaño de una barra de desplazamiento representada (si corresponde). Para medios paginados, este es el alto del cuadro de página.
Un especificado no puede ser negativo.
A veces encuentro Mozilla Developer Network un poco más accesible, pero en este caso proporcionan basically the same information.
¿Necesita admitir navegadores antiguos que no pueden procesar consultas de medios? Sería bastante sencillo escribir un javascript polyfill que tenga el mismo efecto, especialmente si se usa una biblioteca como jQuery.
Editar
que revisó mi ejemplo de código para aproximarse más a su problema. Has comentado:
Jashwant: siempre se prefiere colocar el div debajo del otro. Entonces, solo en el caso de que haya espacio a la derecha pero no en la parte inferior, div2 debería ir a la derecha de div1. - Jonas
Y también establezco los anchos a 400px como en su ejemplo.
Ahora solo flota a la izquierda si la pantalla es demasiado corta para que sean verticales y hay suficiente espacio a la derecha para ambos. De lo contrario, siempre es vertical.
¿Qué pasa si hay espacio en la derecha y también espacio en la parte inferior? – Jashwant
No creo que haya una manera de hacer esto solo con CSS. Creo que probablemente deba involucrar algo de Javascript. Haga que la prueba JS para la altura de la ventana se haga de nuevo y luego calcule cuánto espacio hay. Luego aplique un estilo apropiadamente a cada div ('float: left;' y/o 'clear: both;') –
Jashwant: siempre se prefiere colocar el div debajo del otro. Entonces, solo en el caso de que haya espacio a la derecha pero no en la parte inferior, div2 debería ir a la derecha de div1. –