Foros del Web » Creando para Internet » CSS »

problema con la altura de un div...

Estas en el tema de problema con la altura de un div... en el foro de CSS en Foros del Web. Hola gente: El tema es sensillo, tengo 2 div que deben estar uno al lado del otro, simil celdas. En el div de la izquierda ...
  #1 (permalink)  
Antiguo 02/10/2006, 15:48
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 14 años, 6 meses
Puntos: 2
problema con la altura de un div...

Hola gente:

El tema es sensillo, tengo 2 div que deben estar uno al lado del otro, simil celdas. En el div de la izquierda va el titulo y el texto, y en la derecha un par de opciones.

La estructura es la siguiente:

Código HTML:
<!-- CAGE -->
  <div id="tbl_cage">
	  
    <!-- LEFT -->
    <div id="tbl_left">
      <!-- HEADER -->
      <div id="tbl_header">
          title
      </div>
      <!-- BODY -->
      <div id="tbl_body">
        texto div izquierdo
      </div>
    </div>
	  
    <!-- RIGHT -->
    <div id="tbl_right">
      texto div derecho
    </div>
	
    <!-- BOTTOM -->
    <div id="tbl_bottom">
      texto pie pagina
    </div>
  
  </div> 
El CSS que estoy utilizando es:

Código HTML:
#tbl_cage { 
  width:980px; margin:0px auto 0px auto; text-align:center;
  clear:both; background-color:#E8E8E8;
  border:1px solid #CCCCCC;
  z-index:1;
}

#tbl_header { 
  width:770px; height:120px;
  clear:both; 
  margin: 0px; 
  color:#000000;
  background-color:#999999;
}

#tbl_left {
  float: left;
  clear:left;
  width: 770px;
  background-color:#FFFFFF;
  text-align:left;
  border-right:1px solid #CCCCCC;
  z-index: 800;
}

#tbl_right {
  float: right;
  clear:right;
  width: 209px;
  background-color:#E8E8E8;
  text-align:left;
  height: 1%;
}

#tbl_body {
  clear:both;
  padding:10px;
}

#tbl_bottom {
  clear: both;
  text-align:right;
  padding:10px; margin:0px auto 0px auto;
  width:960px;
  background-color:#999999;
  color: #F5F5F5;
  font-family: "Trebuchet MS", verdana, serif; font-size:10px; font-weight: normal;
  border-top:1px solid #CCCCCC;
}
Todo funciona bien, el unico problema es que, cuando el texto del div tbl_right es mayor al de tbl_left, este ultimo queda "corto", es decir, no llega a unirse con tbl_bottom.

Como puedo solucionar esto?
__________________
I Love Programming...
  #2 (permalink)  
Antiguo 02/10/2006, 18:06
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola FuLaNo_ , la única opción que se me ocurre es quitarle el color de fondo a tbl_cage

Código HTML:
#tbl_cage { 
  width:980px; margin:0px auto 0px auto; text-align:center;
  clear:both; 
  border:1px solid #CCCCCC;
  z-index:1;
}
  #3 (permalink)  
Antiguo 02/10/2006, 19:30
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 14 años, 6 meses
Puntos: 2
pues estamos en la misma solo que al revez, en este caso el que quedaria mal es tbl_right cuando el contenido sea menor al de tbl_left...

el mismo problema solo que invertido...
__________________
I Love Programming...
  #4 (permalink)  
Antiguo 02/10/2006, 19:31
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 14 años, 6 meses
Puntos: 2
por cierto, los z-index en mis codigos eran solo pruebas, por eso uno dice 1 y el otro 800..
__________________
I Love Programming...
  #5 (permalink)  
Antiguo 03/10/2006, 10:01
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola de nuevo FuLaNo_

En ese caso viendo que tienes un contenedor y que luego dentro de el vas a utilizar más que nada #tbl_left y #tbl_left y que además tienes el ancho fijo en estos dos, podrias ponerle una imagen de fondo al contenedor #tbl_cage que se divida en 770px en blanco y luego los otros 209px de color e8e8e8 y repetirla en vertical, así siempre que uno de los dos se estire estirará al otro

He puesto como ejemplo "fondo_contenedor.gif"

Código HTML:
#tbl_cage {
	width:980px;
	margin:0px auto 0px auto;
	text-align:center;
	clear:both;
	border:1px solid #CCCCCC;
	z-index:1;
	background-image: url(fondo_contenedor.gif);
	background-repeat: repeat-y;
	}
#tbl_left {
  float: left;
  clear:left;
  width: 770px;
  text-align:left;
  border-right:1px solid #CCCCCC;
  z-index: 800;
  }

#tbl_right {
  float: right;
  clear:right;
  width: 209px;
  text-align:left;
  height: 1%;
}
Aquí te subo la imagen de ejemplo

http://img90.imageshack.us/img90/689...tenedoroz5.gif

Saludosss
  #6 (permalink)  
Antiguo 03/10/2006, 15:07
Avatar de FuLaNo_  
Fecha de Ingreso: mayo-2003
Ubicación: Don Torcuato, Buenos Aires, Argentina
Mensajes: 1.250
Antigüedad: 14 años, 6 meses
Puntos: 2
buena solucion! de hecho, eso habia hecho en otra pagina pero no lo recordaba!

muchas gracias!
__________________
I Love Programming...
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 04:04.