Foros del Web » Creando para Internet » CSS »

Div's al 100% de alto

Estas en el tema de Div's al 100% de alto en el foro de CSS en Foros del Web. 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"> ...
  #1 (permalink)  
Antiguo 15/02/2007, 07:44
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Pregunta Div's al 100% de alto

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
  #2 (permalink)  
Antiguo 15/02/2007, 07:56
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Div's al 100% de alto

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!!
  #3 (permalink)  
Antiguo 15/02/2007, 08:25
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Re: Div's al 100% de alto

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
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 20:00.