Hola, estoy intentando hacer una página que se adapte a tres, dos y una columnas, dependiendo del ancho de la ventana del navegador.
El intento puede verse aquí:
http://www.e451.net/pruebas/
En este momento, el diseño se adapta así al ancho del navegador:
Tres columnas:
http://cl.ly/2k301R3I3E110r1i3I3K
Dos columnas:
http://cl.ly/3l0j341r0G2K2f100H19
Una columnas:
http://cl.ly/1241183a2y0X1a3Y080U
En tres y una columnas el comportamiento es correcto, pero en dos columnas, lo que quiero conseguir es esto:
http://cl.ly/292b1s0z0v3C0R3x2r2D
¿Alquien sabe si se puede hacer y cómo?
A continuación pongo el HTML y el CSS del experimento, aunque puede verse también en el primer enlace que he dado.
Muchas gracias por todo.
Aitor.
________________
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>estructura para off limits</title>
<link rel="stylesheet" href="estilo.css" type="text/css">
</head>
<body>
<div id="cabecerafondo">
<div id="cabecera">
<div id="cablogo"></div>
<div id="cabcont">
<div id="cab1"></div>
<div id="cab2"></div>
</div>
</div>
</div>
</body>
_______
CSS
body {
margin: 0;
}
#cabecerafondo {
background-color: #565656;
padding: 10px;
}
#cabecera {
max-width: 1050px;
background-color: #757575;
padding: 10px;
}
#cablogo {
width: 320px;
height: 164px;
background-color: #9b9fcf;
display: inline-block;
}
#cabcont {
max-width: 960px;
background-color: #e0e0e0;
display: inline-block;
padding: 10px;
}
#cab1 {
width: 320px;
height: 164px;
background-color: #d08b98;
display: inline-block;
}
#cab2 {
width: 320px;
height: 164px;
background-color: #a7d08e;
display: inline-block;
}