Problemas con div

chujor · #1 (**permalink**) 01/09/2010, 07:53

Hola
Estoy haciendo una web y no tengo mucha expeciancia con css.
A ver si me podeis ayudar.

Tengo un que me ocupa el 90% del ancho (minimo 600px) de la pagina y 400px de alto.
Dentro de este quiero poner 2 div mas para partir verticalmente el primero.
Mi problema es que el que esta a la derecha tiene que ocupar 300px de ancho y el de la izquierda se tiene que ir ampliando segun el tamaño de la pagina.
No se como puedo hacer que el de la izquierda ocupe el hueco que deja libre el de la derecha. Si pongo width:100% el de la derecha se me baja. Si lo pongo en px no se me hace mas grande cuando amplio la pagina

codigo Html:
<div id="Principal">
<div id="Izquierda"></div>
<div id="Derecha"></div>
</div>

codigo CSS:
#Principal{
height:400px;
width:90%;
min-width:700px;
}

#Cuer_Izda{
height:100%;
width:100%;
min-width:400px;
vertical-align:top;
float:left;
}

#Cuer_Dcha{
height:100%;
width:300px;
vertical-align:top;
float:right;
}

Tomasrg · #2 (**permalink**) 01/09/2010, 10:09

Hola.

Me presento. Soy Tomás y soy nuevo en el foro. Espero estar por aquí de vez en cuando si tengo un poco de tiempo.

Acabo de realizar un curso de programación Web y quiero seguir formandome y ayudando a los demás para poder tener ayuda cuando la necesite.

Para el caso que propones y si la altura el fija de 400px quizás lo podrías hacer así.

<!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">
<head>
<style type="text/css">
#Principal {
float: left;
width: 90%;
height: 400px;
background: #CCC;
}

#Izquierda {
margin-right: 300px;
background-color: #0F0;
height: 400px;
}
#Derecha {
position: relative;
margin-top: -400px;
float: right;
width: 300px;
height: 400px;
background-color: #FF0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="Principal">
<div id="Izquierda">Texto a la Izquierda</div>
<div id="Derecha">Columna derecha</div>
</div>
</body>
</html>

No es perfecto, pero para lo que propones funciona ok.

Un saludo

mayid · #3 (**permalink**) 01/09/2010, 12:43

Cita:

No se como puedo hacer que el de la izquierda ocupe el hueco que deja libre el de la derecha. Si pongo width:100% el de la derecha se me baja. Si lo pongo en px no se me hace mas grande cuando amplio la pagina

En principio, en el codigo que pusiste no coinciden los id. A corregirlos.

Para el div izquierdo podes usar width auto (valor por default) y se va a adaptar a su contenido. Pero no uses min-width:400px; porque no es compatible con todos los navegadores.

Lo que podes hacer sino para un diseño líquido es darle un valor de 80% y al otro div un valor móvil de 20%. Esto funciona (dependerá de si necesitas valores fijos o no):

Cita:

#Principal{
height:400px;
width:90%;
background: black
}

#Izquierda{
height:100%;
width:80%;
vertical-align:top;
float:left; background: yellow
}

#Derecha{
height:100%;
width:20%;
vertical-align:top;
float:right; background: blue
}

nota: ese 100% total es respecto al div principal, no al ancho de pagina.

chujor · #4 (**permalink**) 02/09/2010, 10:08

gracias a todos por vuestra ayuda.
He probado lo que me ha puesto tomasrg y funciona a la perfeccion para lo que necesito.

mayid · #5 (**permalink**) 02/09/2010, 11:55

Que bien. Y bienvenidos a los dos!