Divs con max-width y min-width

Xoul · #1 (**permalink**) 23/05/2012, 15:47

Hola,

He estado experimentando últimamente con estas propiedades, y no he podido solucionar, hasta ahora, un problema con dos divs.

Tengo lo siguiente:

Código HTML:

<html>
<body>
<div style="min-width: 720px; max-width: 1120px; margin: 0 auto;">
<!--div 1-->
<div style="float: left; margin: 10px; min-width: 700px; max-width: 700px; height: 350px; background: #21b6e4;"></div>
<!--div 2-->
<div style="float: left; margin: 10px; min-width: 380px; max-width: 700px; height: 350px; background: #000;"></div>
</div>
</body>
</html>

Al tener la ventana maximizada, mayor a 1120px, ambos divs estan a la misma altura. (ver: http://prntscr.com/9lomn)
Pero cuando intento reducir el tamaño de la ventana, menor a 1120px, tengo un problema con el segundo div. (ver: http://prntscr.com/9lop7)

No he podido hacer que el segundo div tenga el mismo largo que el primero.

Me gustaría saber si alguno de ustedes sabe cómo poder realizar esto (ver: http://prntscr.com/9lot0), me sería de mucha ayuda.

Gracias de antemano.

Eourus · #2 (**permalink**) 24/05/2012, 01:16

Hola Xoul.

Primero aclarar algunas cosas:

- Los divs 1 y 2 no tiene el mismo "min-width".
- El div 1 tiene tanto de "min-width" como de "max-width" el mismo valor. Osea que siempre será 700px. Podría sustituirlo directamente por "width:700px" y te quedarías igual.

Si lo que quieres es darle distintos valores de ancho al div2 dependiendo de la resolución que se use, utiliza las medias queries. Puedes decirle que si la resolución es menor de X el ancho pase a 700px y si es mayor que se queda en 380px.

En este post, aunque no trata exactamente de lo mismo, la información que aportan los compañeros te valdría.

http://www.forosdelweb.com/f53/css-para-tablet-994688/

Xoul · #3 (**permalink**) 24/05/2012, 03:01

Ya veo porque no podía encontrar algo similar, no estaba buscando el término correcto (media queries), hay muchísima información con relación a ello.

Ya pude lograrlo, muchas gracias.

C2am · #4 (**permalink**) 24/05/2012, 11:40

Xoul, estaría bueno que pusieras la solución que encontraste, digo el código, de manera que este post quede de consulta para el resto.
Saludos