Ayuda con height al 100% tengo un problemilla, no se mucho de css todavia pero estoy aprendiendo.
el problema es que quiero poner 3 div como columnas y un espacio de 15px entre cada una y en ese espacio pongo tro div que contiene un background de puntitos.
ahora. cuando en algun div lo hago mucho más largo que los otros quiero que los otros divs tanto las columnas como los separadores de puntitos se hagan al 100% automaticamente, ya he probado con height: 100%, min-height: 100%. etc... bueno aqui les dejo el codigo
html
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header" align="center"> top </div> <div id="printipal"> <div id="block_left"> <p>izquierdo </p> </div> <div id="separator_v"></div> <div id="block_center">Centro</div> <div id="separator_v"></div> <div id="block_right">Derecho</div> </div> <div class="clearfloat"></div> <div id="footer"></div> </div> </body> </html>
Código HTML:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
div{
min-height:100%;
}
#container {
min-height: 100%;
width: 100%;
margin: 0 auto;
}
* html #container {
height: 100%;
}
.clearfloat {
clear:both;
}
#header {
min-height: 100%;
width: 100%;
background-image: url(background_top.gif);
height: 270px;
background-repeat: repeat-x;
border:solid 0px;
}
#footer {
background-image: url(background_footer.gif);
background-repeat: repeat-x;
height: 73px;
}
#printipal {
margin:0 auto 0 auto;
width: 726px;
border:solid 0px;
height:100%;
}
#block_left, #block_right, #block_center {
float: left;
height: 100%;
width: 232px;
}
#block_right_solo {
float: left;
height: 100%;
width: 479px;
}
#separator_v {
background-image: url(point_v.gif);
background-repeat: repeat-y;
float: left;
width: 15px;
min-height:100%;
height: auto !important;
height:100%;
}
