[Ovillo] problema con alturas

[Monica Forrisi]

Estimados:

A ver si algun@ me ilumina...

Dentro del div principal tengo tres divs (barizq, contenido y barder) que
tienen diferente cantidad de información (q no puedo calcular a priori pues
se genera dinámicamente)

El tema es que esos divs tienen fondos de color, que necesito tengan altura
100% independientemente del contenido, es decir, que sea el contenido más
grande el que determine la altura de los otros divs

 

Sin embargo, el contenido del barizq, mucho más corto que barder (esto sí
pasará siempre), me queda cortado, no llega al final de la página para
recortarse contra el footer (en IE y FF)

 

En FF, además, la barra derecha se extralimita del contenedor, "inundando el
footer" 

 

 

¿Qué estoy haciendo mal?

Gracias desde ya!

Monica

 

 

 

 

 

/* adjunto código */

 

----------------------------------------------------------------------------
----------------------------------

 

 

<div id="principal"> 

 

<!-- inicio cabezal-->

<div id="header">cabezal</div>

<!-- fin cabezal-->

 

<!-- inicio barizq navegacion -->

<div id=" barizq ">Menú navegación</div>

  <!-- fin barizq navegacion -->

 

<!-- inicio contenido calle central -->

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

<!-- fin contenido calle central -->

 

<!-- inicio barra derecha -->  

<div id="barder"> 

mucha info para colocar en barder (el texto y las imágenes ocupan más
espacio q el menú de navegación de la barra izquierda y ahí genera el
problema)</div>

<!-- fin barra derecha -->  

 

<!-- inicio footer -->

<div id="pie"><p>info al pie</p></div>

<!-- fin footer -->

 

</div>

 

 

----------------------------------------------------------------------------
----------------------------------

 

 

 

/* CSS Document */

 

* { margin: 0px; padding: 0px; }

 

* body{

 color:#333;

 font:11px/15px Tahoma, Arial, Helvetica, sans-serif;

 background: url(../imagenes/fondopag.gif) repeat-y center;

 height: 100%; 

            }

 

/* div contenedor total */

#principal{

            background: #FFF;

            width: 772px;

            position: absolute;

            left: 50%;

            margin-left: -390px;

            height: 100% !important; 

            border-left: 4px solid #FFF;

            border-right: 4px solid #FFF;

 }

 

/* cabezal de pagina */ 

#header{

            height:60px;

            background-color:#2C8749; 

 }

 

 

/* barra derecha */

#barder {

            float: right;

            width:183px;

            height: 100% !important;

            background: #F7F8F5;

            overflow: visible;

}

 

/* barra izquierda */

div#contenedor{

            width: 137px;

            height: 100% !important;

            float: left;

            position:relative;

            background: #F0F1EB;

            padding: 0;

            }

 

 

/* pie de página */

 

#pie{

background: #1D6635;

font-size:12px;

color:#FFF;

padding:10px;

clear: both;

height: 80px;

z-index: 900;

}

 

/* CONTENIDO - Calle central */

 

#contenido{

            float: left;

            width:422px;

            height: 100% !important; 

            overflow: auto;

            padding: 15px;

            z-index: 30;

}