Foros del Web - Ver Mensaje Individual

C2am · #16 (**permalink**) 22/10/2011, 12:34

Hola Isabel
He probado mi propuesta modificando tu propuesta:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
 
#con {
width: 100%;
height: 500px;
}
 
#uno {
min-width: 960px;
width: 100%;
background-color: red;
height: 500px;
}
 
#dos, #tres {
float: right;
width: 300px;
height: 500px;
}
 
#dos {
background-color: yellow;
}
 
#tres {
background-color: pink;
}
</style>
</head>
<body>
<div id="con">
        <div id="tres">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
        <div id="dos">Lorem ipsum dolor sit amet, consectetuer adipiscing</div>
        <div id="uno">Lorem ipsum dolor sit amet, consectetuer adipisc</div>
</div>
</body>
</html>

Modifique la altura solo para observar mejor, no tiene que ver con el problema a resolver.

Bueno, probandolo en Chrome funciona tal como dije, el div uno ocupa todo el espacio disponible, y al achicar la ventana el div uno tiende a cero, hasta que el ancho es inferior al ancho del div 3, con lo cual el div 2 queda por debajo.
No soy un experto ni mucho menos, pero por lo poco que sé, tengo entendido que al ser el div un elemento de bloque y al no definirse ningun ancho el mismo ocupara todo al ancho disponible, que sería lo mismo que poner 100% ¿o no? (pregunto en serio, no es ironica mi pregunta).

Entonces, primero coloco el div 3 y luego el div 2 (en lo cual coincidimos), y luego coloco el div uno (que ocupara el 100% del ancho disponible que dejaron los div 3 y 2).

Bueno, eso es lo que creo, pero puedo estar equivocado.
Saludos