problema con desbordamiento - float left

[cristo995]

tengo un contenedor - un div "menu" y un div "cajas" pero al encojer la pantalla el div "cajas" se me pega un salto uvicandose debajo del menu

algo asi:

<div class="contenedor">
<div class="menu">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</div>

<div class="cajas">
<div class="caja1"></div>
<div class="caja1"></div>
<div class="caja1"></div>
<div class="caja1"></div>
<div class="caja1"></div>
<div class="caja1"></div>
</div>
</div>

div.contenedor
{
margin:0px auto;
min-width:1000px;
}
div.menu
{
float:left;
width:220px;
}

div.cajas
{
float:left;
}

div.caja1
{
float:left;
width:320px;
}


lo que quisiera hacer es que al momento de achicar la pantalla las cajas se fueran acomodando por que inicialmente estan en filas de 3 entonces cuando se achique la pantalla queden en filas de 2 y si la sigo achicando ps me agarra un scroll de devido al min-width..


pero el problema que tengo que tengo, es que al momento de achicar la pantalla ps inicialmente va bien por que se ponen en filas de 2 pero si la sigo achikando pummmm todas las cajas pasan debajo del menu . nisiguiera las alcanzo a morder las cajas como para decir que es obvio que bajen


tendria que seguir en filas de 2 y luego cuando agarre los 1000 px ps me saldria normal un scroll pero no es asi :( :(

[alzacon]

pues a mi se me ve mal desde el principio, con ese código.

[falkon765]

en ves de float intenta usar esto display: inline-block en el div.
suerte

[herzbazi]

no estoy seguro de lo que pides , pero haber dime lo que quieres es que sea responsive desing correcto?

osea que dependiendo del medio se acomenden los div de tres a dos y de dos a uno
pero que en la resolucion de 1000px se vea corectamente?.

mmmmm de ser asi cambia el

Código CSS:

min-width:1000px;
 

por

Código CSS:

max-width:1000px;
 

mira como al achicar la pantalla reconoce que es mas pequeña y van bajando los divs.

si te funciona perfecto si no replantea la pregunta y con gusto te ayudo.

[pzin]

Cambia esto:

Código CSS:

div.cajas {
  float:left;
}
 

Por:

Código CSS:

div.cajas {
  overflow: hidden;
}
 

Así no debería de ocurrir que se bajen las cajas. Luego con media-queries puedes ir cambiando que .caja1 mida 25% para temer cuatro por fila, 50% para dos por fias, etc. Luego el ancho mínimo aquel, seguramente no vayas a necesitarlo.