problemas con el maquetado

[fjchavez]

Hola a todos como podria hacer con este codigo para que pueda calzar el div#pie debajo del div#cuerpo (el cual contiene a los div #menu_izq,#contenido y #menu_der).
Ademas como hacer para que div #menu_izq,#contenido y #menu_der tengan la misma altura, es decir que sea de acuerdo al texto, puse height:100% pero cada uno va independiente y queda como en la imagen.
Actualmente el aspecto de mi plantilla es así:

Código:

#cuerpo{
        position:absolute;left:0;
}

#menu-izq {
        position:absolute;left:0;
        top:199px;width:180px;
        background: url(../images/menu_izq.gif);
}

#contenido {
        position:absolute;left:180px;
        top:199px;width:411px;
        background: url(../images/cuerpo.gif);
}

#menu-der {
        position:absolute;left:591px;
        top:199px;width:189px;
        background: url(../images/menu_der.gif);
}

#pie {
        position:absolute;left:0;
        width:780px;
        background: url(../images/pie.jpg);
}

Código HTML:

 <div id="cuerpo">
             <div id="menu-izq"></div>
             <div id="contenido"></div>
             <div id="menu-der"></div>
        </div>
        <div id="pie"></div> 

[naf]

Yo soluciono mi problema de altura en las columans iguales de la siguiete manera.
Genero una columna contenedora, para las 3 columnas, con el color de las columnas lateras. A las columnas laterales no les doy color, pero si a la columna central. De esta manera me ha resultado bastante bien.
He probado varias técnicas para alargar columnas, pero hasta el momento ninguna me convence 100 %. Pero si quieres seguir aprendiendo te dejo un tutorial bastante bueno http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/#contenido.

Saludos..

[fjchavez]

Sí, muy buen enlace, lo solucioné en el acto.
Ahora tengo otro problema, en IE 6 para Windows se me desacomoda ligeramente la página y queda así



mientras k en firefox esta bien todo.

Código CSS

body{
text-align: center; /*para centrarlo en internet explorer*/
}

#cuerpo, #contenedor, #header{
width:780px;
margin: 0 auto;/* Es necesario poner un ancho o alto para que IE "limpie" el elemento automaticamente */
}

#header {
padding: 0;
margin:0;
}

#top-enlace {
float:left;
width:364px;
height:28px;
overflow:hidden;
background: url(images/top_enlace.gif) no-repeat;
}

#top-fig-1 {
float:left;
width:227px;
height:28px;
background: url(images/top_fig_1.gif) no-repeat;
}

#top-buscar {
float:right;
width:189px;
height:44px;
background: url(images/top_buscar.gif) no-repeat;
}

#top-medio-izq {
float:left;
width:180px;
height:142px;
overflow:hidden;
background: url(images/top_medio_izq.gif) no-repeat;
}

#logo {
float:left;
width:411px;
height:142px;
background: url(images/logo.gif) no-repeat;
}

#top-medio-der {
float:right;
width:189px;
height:142px;
overflow:hidden;
background: url(images/top_medio_der.gif) no-repeat;
}

#top-abajo-path {
float:left;
width:423px;
height:29px;
background: url(images/top_abajo_path.gif) no-repeat;
}

#top-fig-2 {
float:left;
width:168px;
height:29px;
background: url(images/top_fig_2.gif) no-repeat;
}

#top-fig-3 {
float:right;
width:189px;
height:13px;
background: url(images/top_fig_3.gif) no-repeat;
}

#top-contenido{
clear:both;
width:780px;
height:10px;
background: url(images/top_contenido.gif) no-repeat;
}

#contenedor {
overflow: hidden;
}

/* Limpiamos el contenedor para los navegadores que si funcionan como deben */
#contenedor:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}

#izquierda, #central, #derecha {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;

}
#izquierda {
width: 180px;
background: url(images/menu_izq.gif) repeat-y;
}

#central {
width: 420px;
background: url(images/contenido.gif) repeat-y;
}

#derecha {
width: 180px;
background: url(images/menu_der.gif) repeat-y;
}

#bottom-contenido{
clear:left;
width:780px;
height:10px;
background: url(images/bottom_contenido.gif) no-repeat;
}

#footer {
clear: left;
width:780px;
height:40px;
margin: 0;
padding: 0;
background: url(images/pie.gif) no-repeat;
}

Código HTML

<div id="cuerpo">

<div id="header">
<div id="top-enlace"></div>
<div id="top-fig-1"></div>
<div id="top-buscar"></div>
<div id="top-medio-izq"></div>
<div id="logo"></div>
<div id="top-medio-der"></div>
<div id="top-abajo-path"></div>
<div id="top-fig-2"></div>
<div id="top-fig-3"></div>
</div>

<div id="top-contenido"></div>

<div id="contenedor">

<div id="izquierda">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
<div id="central">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
<div id="derecha">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>

</div>

<div id="bottom-contenido"></div>

<div id="footer"></div>

</div>