problema con la altura de un div...

FuLaNo_ · #1 (**permalink**) 02/10/2006, 14:48

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?

kahlito · #2 (**permalink**) 02/10/2006, 17:06

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;
}

FuLaNo_ · #3 (**permalink**) 02/10/2006, 18:30

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...

FuLaNo_ · #4 (**permalink**) 02/10/2006, 18:31

por cierto, los z-index en mis codigos eran solo pruebas, por eso uno dice 1 y el otro 800..

kahlito · #5 (**permalink**) 03/10/2006, 09:01

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

FuLaNo_ · #6 (**permalink**) 03/10/2006, 14:07

buena solucion! de hecho, eso habia hecho en otra pagina pero no lo recordaba!

muchas gracias!