duda sobre css y html, dividir pagina en 3 columnas

[minombreesmm]

http://www.desarrolloweb.com/articulos/2160.php

en el ejemplo.. es algo similar a lo que estaba haciendo, pero no me salia hasta que consulte mejor..
y por alguna extraña razon es la unica forma de que quede bien..

el enfoque son 3 columnas

izquierda, central y derecha.

el orden de los divs segun yo es.

Código HTML:

<div id="lateal">(izquierdo)
con float left 
</div>
<div id="central">
con float left y margen left  de 100px para que se vaya al centro
</div>
<div id="otrolado">("derecho")
con float right para que se acomode hasta la orilla
</div>
 

eso me acarrea el problema de que al darle height al central.. el otrolado se va hacia abajo segun el height del central
osea

central height 100px;
otrolado y=100px";

se baja.





en cambio si acomodo las cosas asi.
ancho de pantalla supongamos 300px y que cada div mide de ancho 100px;
<div id="lateal">

Código HTML:

</div>
<div id="otrolado">
 
</div>
<div id="central">
 
</div>
 

todo funciona bien mmmm
no lo entiendo. alguien podría explicarme. jugue demasiado con el css. y la solucion fue html oO.



incluso encontré este ejemplo con mi misma solusion.

Código HTML:

<div id="contenedor"> 
    <div id="cabecera"> 
       Cabecera 01 
    </div> 
    <div id="cuerpo"> 
       <div id="lateral"> 
          <ul> 
             <li><a href="#">Enlace 1</a> 
             <li><a href="#">Vínculo 2</a> 
             <li><a href="#">Otro enlace</a> 
             <li><a href="#">Link chulo</a> 
             <li><a href="#">Más enlaces</a> 
             <li><a href="#">Otro último</a> 
          </ul> 
       </div> 
       <div id="otrolado"> 
          <img src="bannerlateral.gif" width="120" height="600" alt=""> 
       </div> 
       <div id="principal"> 
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla condimentum commodo orci. Nulla eget purus nec massa 
          ... 
       </div> 
    </div> 
    <div id="pie"> 
       © 2005 DesarrolloWeb.com 
    </div> 
</div>
 

Código CSS:

BODY { 
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; 
    margin: 10 0 10 0px; 
    text-align: center; 
    background-color: #ebebeb; 
} 
#contenedor{ 
    text-align: left; 
    width: 770px; 
    margin: auto; 
} 
#cabecera{ 
    background-color: #d0d0ff; 
    color: #333300; 
    font-size:12pt; 
    font-weight: bold; 
    padding: 3 3 3 10px; 
} 
#cuerpo{ 
    margin: 10 0 10 0px; 
} 
#lateral{ 
    width: 160px; 
    background-color: #999999; 
    float:left; 
} 
#lateral ul{ 
    margin : 0 0 0 0px; 
    padding: 0 0 0 0px; 
    list-style: none; 
} 
#lateral li{ 
    background-color: #ffffcc; 
    margin: 2 2 2 2px; 
    padding: 2 2 2 2px; 
    font-weight: bold; 
} 
#lateral a{ 
    color: #3333cc; 
    text-decoration: none; 
} 
#otrolado{ 
    width: 120px; 
    float: right;   
} 
#principal{ 
    margin-left: 170px; 
    background-color: #ffffff; 
    padding: 4 4 4 4px; 
    width: 460px; 
} 
#pie{ 
    background-color: #cccccc; 
    padding: 3 10 3 10px; 
    text-align:right; 
    clear: both; 
}
 

la otra cosa es que cuando lleno de divs el div central, cuando el alto de los divs internos sobrepasa el de el div contenedor, el div contenedor no se hace alto automaticamente. alguien sabe que propiedad es?
los divs internos que meto y crecen tiene position absolute..
de antemano gracias