Si la web es "líquida", no creo que necesites un "tamaño" porcentual para el alto del contenedor, pues este será relativo a su contenido. (creo que ni yo me entendí), bueno, el caso es que no tienes porque usar un tamaño % de alto puesto que es relativo al contenido de tu página y lo que son tus divisiones internas como la barra de navegación y el encabezado usar medidas de píxeles para el alto (height), y las otras divisiones déjalas sin medidas de alto porque creceran a medida que crezca su contenido, también si se monta una capa encima de otra puedes usar clear:both.
Código:
body, td, tr {
margin: 0;
color: #000000;
}
#contenedor /* capa que contiene a todas las demas. */{
position:relative;
width:97%;
margin: 10px auto;
}
#header /* Cabecera para poner el Titulo y Logo de la web*/{
height:85px;
width: 100%;
font-size:0.7em;
border: 1px solid #0000ff;
}
#barnav /* Barra de navegación Horizontal*/{
margin: 3px 0;
height: 25px;
width: 100%;
border: 1px solid #0000ff;
}
.catlinks
{
text-align:center;
text-decoration:underline;
text-shadow:none; /*????*/
vertical-align:middle; /*????*/
font-size:0.7em;
}
.columnas
/* Menu de navegación Vertical para poner enlaces destacados */
/* Menu de navegación Vertical derecho*/{
width: 15%;
border: 1px solid #0000ff;
float: left
}
#contenido /* Capa donde ira el contenido.*/{
width: 69%;
border: 1px solid #0000ff;
float: left;
}
#pie /* Capa para poner el Copyleft,... */
{
height: 50px;
width: 100%;
border: 1px solid #0000ff;
clear:both;
margin-top: 3px;
}
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="header">imagen Web</div>
<div id="barnav" class="catlinks">aquí va el contenido del header</div>
<div class="columnas">mucho más texto</div>
<div id="contenido">mucho texto</div>
<div class="columnas">Texto</div>
<div id="pie"> aquí va el contenido del pie de página </div>
</div>
</body>
</html>