Div's al 100% de alto

DragonX · #1 (**permalink**) 15/02/2007, 07:44

Hola de nuevo......

miren, les cuento un poco que me esta pasando.....primero les dejo el código:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EVMB | una tradición desde 1932</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*---------------------------------Contenido General---------------------------*/
body {
   margin: 0;
	padding: 0;
   background-color: #FFFFFF;
	font-family:  "Arial",Trebuchet MS, Lucida Grande, Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 12px;
   text-align:center;
} 
#contenedorGral {
   text-align:auto;
   position:relative;
   width: 784px;
   margin:auto;
   overflow: auto;
   background:#FFFF00;
}
#Cabezal{
   width: 772px;
   background-color: Blue;
}
#CabezalIzq{
   width: 258px;
   background-color: Fuchsia;
   float: left;
}
#CabezalDer{
   width: 514px;
   background-color: Red;
   float: left;
}
#ContenidoIzq{
   width: 258px;
   background-color: #FF5900;
   float: left;
	overflow: auto;
}
#ContenidoDer{
   width: 514px;
   background-color: #00005A;
   float: left;
	overflow: auto;
}
/*------------------------------Fin Contenido General---------------------------*/
/*--------------------------------Imagenes del site-----------------------------*/
#ImgAgenda {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_agenda.jpg);
    background-repeat:no-repeat;
}
#ImgAgenda1 {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_agenda-birome.jpg);
    background-repeat:no-repeat;
}
#ImgAnteojos {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_anteojos.jpg);
    background-repeat:no-repeat;
}
#ImgBirome {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_birome.jpg);
    background-repeat:no-repeat;
}
#ImgCables {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_cables.jpg);
    background-repeat:no-repeat;
}
#ImgEscaleras {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_escaleras.jpg);
    background-repeat:no-repeat;
}
#ImgLapicera {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_lapicera.jpg);
    background-repeat:no-repeat;
}
#ImgLapicera1 {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_lapicera1.jpg);
    background-repeat:no-repeat;
}
#ImgLapiz {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_lapiz.jpg);
    background-repeat:no-repeat;
}
#ImgLibro {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_libro.jpg);
    background-repeat:no-repeat;
}
#ImgLibroAbierto {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_libroabierto.jpg);
    background-repeat:no-repeat;
}
#ImgMujerCompu {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_mujercompu.jpg);
    background-repeat:no-repeat;
}
#ImgMujerCompu1 {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_mujercompu_costado.jpg);
    background-repeat:no-repeat;
}
#ImgSilla {
    margin: 0px;
    width:784px;
    height:137px;
    background-image: url(SHG/web/imagenes/cabezal_sillaroja.jpg);
    background-repeat:no-repeat;
}
/*--------------------------------Fin Imagenes del site-----------------------------*/
</style>
</head>

<body>
<div id="contenedorGral">Contenedor General 
  <div id="Cabezal">Cabezal 
    <div id="CabezalIzq">Div Izquierdo</div>
    <div id="CabezalDer">Div Derecho</div>
  </div>
  <div id="ImgAgenda" title="Imagen">Imagen CABEZAL</div>
 <div id="ContenidoIzq">DIV Menu</div>
 <div id="ContenidoDer">Div ContenidoGral</div>
</div>
</body>
</html>

Hasta aca todo anda perfectamente, ahora lo que no puedo hacer, es que el #contenedorGral y #ContenidoIzq y #ContenidoDer tengan un alto del 100%!

Si me pudieran dar una manito se los agradecería mucho!

GraX
el pelado

DragonX · #2 (**permalink**) 15/02/2007, 07:56

Bueno les dejo un ejemplo de lo que quiero hacer.....

verán que el esqueleto CSS tiene la misma estructura que el site de la imagen.

Además me pasa que si pongo contenido dentro del #ContenidoIzq o #ContenidoDer estos se colocan uno debajo del otro y no uno al lado del otro como lo necesito....

Si me pueden ayudar en esta me salvan la vida

Gracias!!

MaXaC · #3 (**permalink**) 15/02/2007, 08:25

muahahhah(risa malvada), disfruto cuando los flasheros sufren al pasar a CSS

Haber, siempre hay problemas con la interpretacion de las alturas entre FF e IE, una salida es poner

Cita:

html, body{
height:100%

}

o

<div style="width:100%;clear:both"></div>

Lo ultimo al final de cada capa, para que asi esta empuje a la que esta debajo, haber si te sirve de algo, prueba y nos comentas