stretching div to parents height, cant fin the answer on google!!!

Joaquinrox Peon

Messages:: 1

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

So, i am making a website and i want a layout that consists of a top banner, a content section 800 px wide and a footer that always stays below the content, the thing is that i made image borders on the content section (4 corners+ left,right,top,bottom margins). I can get the container of the borders to strech to 100% of the screen so it doesn't look bad when there is little content, but the divs that have the borders and are in the 100% height container never stretch beyond a few pixels unless i put text inside them!, you can guess how bad this looks if the color inside the borders is the same as the one outside.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOLA</title>
<link href="Estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="OuterCabezera">
<div id="espacio"></div>
<div id="LogoRotary"></div>

<div id="Cabezera">
<div id="ContenedorBotones">
<div id="ContenedorBotones1">
<div id="Boton1"></div><div id="Boton2"></div><div id="Boton3"></div></div>
<div id="ContenedorBotones2"><div id="Boton4"></div><div id="Boton5"></div><div id="Boton6">a</div></div>
</div>
</div>

</div>

<div id="OuterWrap"><div id="Binf"><div id="Bd"><div id="Bi"><div id="E1"><div id="E2"><div id="E3"><div id="E4"> 
hello world
</div></div></div></div></div></div>
</div><div id="Bs">
</div></div>

<div id="FootWrap">
<div id="Foot">
<div id="EF1"><div id="EF2"> </div></div>
</div></div>

</body>
</html>
Click to expand...

and the style sheet:
html{height:100%}
body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    color:#666666;
	background:#FFF;
	margin: 0;
	padding: 0;
	text-align: center;
	height:100%
}
/* Cabezera de la pagina */
#OuterCabezera { height: 203px; padding: 0px; background-image: url(Imagenes/CabezeraFondo.jpg)}
#Cabezera {}
#LogoRotary { background-image:url(Imagenes/dibujo2.png); height:100px; width:302px; margin-left: 150px; float:left}
#espacio { height:20px}
#ContenedorBotones1 {height: 25px; width: 150px; float:right}
#ContenedorBotones {height: 25px; width: 300px; margin: 0 auto 0 auto; margin-top: 90px}
#ContenedorBotones2 {height: 25px; width: 150px; float: right}
#Boton1 {background:url(Imagenes/Boton.PNG) 0 100% no-repeat; height:25px; width:50px;float: right;}
#Boton2 {background:url(Imagenes/Boton.PNG) 0 100% no-repeat; height:25px; width:50px; float: right}
#Boton3 {background:url(Imagenes/Boton.PNG) 0 100% no-repeat; height:25px; width:50px; float: right;}
#Boton4 {background:url(Imagenes/Boton.PNG) 0 100% no-repeat; height:25px; width:50px;float: right; }
#Boton5 {background:url(Imagenes/Boton.PNG) 0 100% no-repeat; height:25px; width:50px;  float:right}
#Boton6 {background:url(Imagenes/Boton.PNG) 0 100% no-repeat; height:25px; width:50px;  float: right;}
/* MARCO DEL CONTENIDO DE LA PAGINA, Contenedor de todas las DIV de contenido */
#OuterWrap{ min-height:100%; width: 800px; background-color:#F00; margin: auto auto}
#Wrap {  min-height:100%;background-color: #0F0}


/* MARCO DEL CONTENIDO DE LA PAGINA, BORDES */
#Bs { background:url(Imagenes/Bs.PNG)0 0% ; display:block; min-height:100%}
#Binf { background:url(Imagenes/Binf.PNG) 0 100% repeat-x; height:100% }
#Bd { background:url(Imagenes/Bd.PNG) 0 0 repeat-y; height:100% }
#Bi { background:url(Imagenes/Bi.PNG) 100% 0 repeat-y; height:100% }
/* MARCO DEL CONTENIDO DE LA PAGINA, ESKINAS */
#E1 { background:url(Imagenes/E1.PNG) 0 0 no-repeat; height:100%}
#E2 { background:url(Imagenes/E2.PNG) 100% 0 no-repeat; height:100%}
#E3 { background:url(Imagenes/E3.PNG) 0 100% no-repeat; height:100%}
#E4 { background:url(Imagenes/E4.PNG) 100% 100% no-repeat;  padding:5px; height:100%}
/* Contenedor y esquinas inferiores curvas del Pie */
#FootWrap {position:relative; bottom:0;  width:100%}
#Foot {;width:800px; background:#333; height: 50px; margin:0 auto}
#EF1 { background:url(Imagenes/EF1.PNG) 0 100% no-repeat; height: 100%;}
#EF2 { background:url(Imagenes/EF2.PNG) 100% 100% no-repeat; height: 100%;}
Code (markup):
any help i could get would make me real happy