Foros del Web » Creando para Internet » CSS »

Problemas con div

Estas en el tema de Problemas con div en el foro de CSS en Foros del Web. 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% ...
  #1 (permalink)  
Antiguo 01/09/2010, 08:53
 
Fecha de Ingreso: septiembre-2010
Mensajes: 2
Antigüedad: 7 años, 3 meses
Puntos: 0
Problemas con div

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;
}
  #2 (permalink)  
Antiguo 01/09/2010, 11:09
 
Fecha de Ingreso: abril-2009
Mensajes: 1
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Problemas con div

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
  #3 (permalink)  
Antiguo 01/09/2010, 13:43
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Problemas con div

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.
  #4 (permalink)  
Antiguo 02/09/2010, 11:08
 
Fecha de Ingreso: septiembre-2010
Mensajes: 2
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Problemas con div

gracias a todos por vuestra ayuda.
He probado lo que me ha puesto tomasrg y funciona a la perfeccion para lo que necesito.
  #5 (permalink)  
Antiguo 02/09/2010, 12:55
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Problemas con div

Que bien. Y bienvenidos a los dos!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:00.