Foros del Web » Creando para Internet » CSS »

Problemas con tamaños de div's

Estas en el tema de Problemas con tamaños de div's en el foro de CSS en Foros del Web. Hola que tal. Estoy haciendo una maquetación a 3 columnas y me han surgido dos problemas: - ¿Porqué el cuadro azul no me llega hasta ...
  #1 (permalink)  
Antiguo 24/04/2010, 14:45
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Problemas con tamaños de div's

Hola que tal.

Estoy haciendo una maquetación a 3 columnas y me han surgido dos problemas:

- ¿Porqué el cuadro azul no me llega hasta el pie? Es curioso porque si hago la ventana del navegador mas grande o mas pequeña, el borde inferior del cuadro azul tabién se mueve, guardando siempre la misma distancia a la base.

- En algunas subpáginas las 3 columnas serán sólo 2, eliminándose la tercera, la de <div id="otrolado">, pero en ese caso, el cuadro azul, que es el que contiene la columna 2 y 3 no se ajusta al borde derecho.

¿Alguien sabe porqué ocurre esto? Os dejo los códigos, gracias! :

Código HTML:
<html>
<head>
<title>css</title>
</head>
<body>
<div id="contenedor"> 
  <div id="cuerpo"> 
    <div id="lateral"><img src="bannerlateral.gif" width="120" height="1000" alt=""> 
    </div>
    <div id="derecha"> 
      <div id="principal"> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        <p> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
          TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
          TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
          TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
          TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
          TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
      </div>
      <div id="otrolado"> <img src="bannerlateral.gif" width="120" height="600" alt=""> 
      </div>
    </div>
  </div>
  <div id="pie"> PIE </div>
</div>
</body>
</html> 
Código HTML:
body {
	margin: 0 0 0 0px;
	text-align: center;
}
#contenedor{
	text-align: left;
	background-color: green;
	width: 900px;
	margin: auto;
}
#cuerpo{
   margin: 0px;
	position : relative;
}
#lateral{
   width: 150px;
   float:left;
   background-color: red;
}
#principal{
   width: 488px;  
   float: left;
}

#otrolado{
	width: 260px;
	float: right;
	padding: 0px;
}
#pie{
   background-color: #cccccc;
   padding: 3 10 3 10px;
   text-align:right;
   clear: both;
}

#derecha{
	margin: 0px;
   background-color: blue;
   border: 1px solid #000;
	float: left;
	height: 100%;
}
  #2 (permalink)  
Antiguo 25/04/2010, 02:12
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 7 años, 7 meses
Puntos: 154
Respuesta: Problemas con tamaños de div's

Estimado

Antes que nada yo que tu ordenaria mejor las capas, asi te entiendes mas facil y usar comentarios para establecer donde termina cada div, eso te ayudara un monton para entender el orden de las capas. En principio el problema que tienes aca es que el height:100% se ajusta a la imagen de height 600px que tienes puesta en la capa azul. Para que quede con un height igual que el lateral rojo, deberas poner height:1000px o el tamaño que tenga la imagen que pones dentro del lateral rojo.

Espero haberte ayudado
  #3 (permalink)  
Antiguo 26/04/2010, 12:00
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Problemas con tamaños de div's

En realidad no se ajusta al height de la imagen de azul como dices, porque según el tamaño de la ventana del navegador, en ocasiones queda mas arriba o mas abajo.

No puedo poner un tamaño en px para la altura ya que el lateral rojo será variable, unas veces mas alto y otras mas bajo. Gracias de todos modos.

¿Alguien sabe que está ocurriendo?
  #4 (permalink)  
Antiguo 26/04/2010, 12:18
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.021
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: Problemas con tamaños de div's

1.- Tienes 1 </div> sobrando.
2.- Un párrafo sin cerrar.
3.- Estilos innecesarios (#cuerpo tiene position : relative; ¿con qué objetivo?.

En fin, el escenario es un poco oscuro. Toma nota del consejo de ipraetoriux y revisa mejor tu código. Aunque creo que el problema lo produce esa combinación del div sobrante con alguno de los float.
  #5 (permalink)  
Antiguo 26/04/2010, 12:30
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Problemas con tamaños de div's

Bueno, es que soy un poco novato en esto del css.

De todos modos, he arreglado lo del div (me faltaba un /div) y lo de los párrafos y sigue sin funcionar.
  #6 (permalink)  
Antiguo 26/04/2010, 21:20
 
Fecha de Ingreso: enero-2009
Mensajes: 16
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Problemas con tamaños de div's

No se entiende muy bien lo que deseas pero a la rapida puedes lograr 3 columnas asi.

Código HTML:
<html>
<head>
<title>css</title>
<style type="text/css">
html{height:100%}
body {
	height:100%;
	margin:0px;
	text-align: center;
}
#contenedor{
	height:100%;
	text-align: left;
	background-color: 222;
	width: 900px;
	margin: auto;
}
#lateral{
	height:100%;
   width: 150px;
   float:left;
   background-color: red;
}
#principal{
	height:100%;
   width: 488px;  
   float: left;
   background:#999;
}

#otrolado{
	height:100%;
	width: 260px;
	float: left;
	padding: 0px;
	background:#666;
}
#pie{
   background-color: #cccccc;
   padding: 3 10 3 10px;
   text-align:right;
   clear: both;
}

</style>
</head>
<body>
<div id="contenedor"> 
    <div id="lateral">TEXTO</div> 
      <div id="principal"> TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
        TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO 
      </div>
      <div id="otrolado">TEXTO</div>
  <div id="pie"> PIE </div>
</div>
</body>
</html> 
  #7 (permalink)  
Antiguo 27/04/2010, 14:52
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Problemas con tamaños de div's

Hola Asscort.
El problema de tu código es que en cuanto meto contenido, por ejemplo un banner, en el lateral : <div id="lateral">TEXTO<br><img src="bannerlateral.gif" width="120" height="1000" alt=""></div>

...el fondo rojo no cubre el 100%

Por otra parte, en realidad se trataría de 2 columnas en la cual, en la segunda, a veces aparecería una tercera y otras no. En esos casos, la 1ª seria de 150px, 3ª 260px y la central lo restante. En los casos en lo que no hubiese contenido en la 3ª, la primera seguiría siendo de 150px y la central sería del restante.

Para que os hagais una idea, sería algo similar a la página principal de css zen garden, pero en el orden inverso. Primero el menú en la 1ª columna, contenido en el centro, y en algunos casos otro contenido en la ctercera (similar al cuadro de "A demonstration of what can be accomplished ..." sólo que debajo de éste no vendría contenido de la capa central). en los casos que no haya columna 3ª, la central ocuparía todo el ancho restante.
  #8 (permalink)  
Antiguo 27/04/2010, 16:29
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Problemas con tamaños de div's

en estos casos, hago una salida cobarde como le llamamos en mi trabajo, creamos un div contenedor de todas las capas el cual tiene un background con los colores de todas las columnas, en este caso leyendo a la rapida entendi que avian 3 colores, entonces me hago un pixel con el ancho de las 3 columnas, en el cual le doy los colores de cada columna, luego lo pongo en el div contenedor, le doy un repeat y un clear.

Entonces independientemente cual div se crezca o cual se encoja, siempre abra uno q empuje al contenedor de todos, esto es engañando la vista del usuario nomas, si no me entiende alguien o phisc necesita mas info o q le mande un ejemplo q me avise xq toy algo ocupado en el trabajo.

Saludos
  #9 (permalink)  
Antiguo 28/04/2010, 03:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas con tamaños de div's

Hola:

Échale un vistazo a este ejemplo del maestro kseso?, seguramente de servirá de ayuda.

Saludos.

  #10 (permalink)  
Antiguo 09/05/2010, 04:11
 
Fecha de Ingreso: agosto-2007
Mensajes: 21
Antigüedad: 10 años, 4 meses
Puntos: 0
Respuesta: Problemas con tamaños de div's

Jomaruro ese ejemplo me viene muy bien para conseguir lo que busco. Muchas gracias a ti y al resto que han comentado el post. Saludos!

Etiquetas: tamaños
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 16:49.