Conocidos son por todos las técnicas de diagramado de sitios con columnas, tanto flotando como posicionando; cada uno tendrá su favorita. Lo más importante es saber las fortalezas de cada una, para poder controlarlas de mejor manera. Me acostumbré a flotar columnas, a lidar con sus defectos (oh clearfix cuánto de adoro), pero position también tiene un espacio ganado en mi corazón (y en esta ocasión será el elegido).

Sitios con columnas de anchos fijos son pan comido ya. Trabajar con porcentajes, tiene cierta dificultad pero se pueden sobrellevar. Imagínense mezclarlos. He visto sitios semi-líquidos, donde una columna crece según el tamaño de la ventana, mientras que la otra al lado se queda fija. Pues recién pude fijarme en cómo fueron construídas, y he podido replicarlas en el mundo real. De eso se trata este artículo, sobre cómo construir un layout híbrido: columnas fijas y columnas líquidas. Muy entretenido, primero que nada el ejemplo gráfico (muevan la ventana y vean de qué hablo).

Ver ejemplo 1

Para lograr esto, se eligió position para lograr poner las columnas donde necesitamos. Esto facilita que la columna que esté fija, quede relegada a un rincón (derecho o izquierdo, da igual. En el ejemplo anterior quedó pegado a la derecha con un right: 0;) Así, la otra colummna (que necesitamos que se haga más ancha o angosta, según el tamaño que adquiera nuestra ventana de browser) queda pegada al otro extremo (left: 0;) y tiene libertad ya que no le definimos width. Por otro lado, sí tiene definido un marginado opuesto considerando ya el espacio fijo que ocupa la columna que no crece. Básicamente ese es el funcionamiento. Como siempre, el HTML muy simple utilizado:

Y aquí llega la magia del CSS:

div#header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 80px;
}
div#content {
     position: absolute;
     top: 100px;
     left: 20px;
     right: 240px;
}
div#menu {
     position: absolute;
     top: 100px;
     right: 20px;
     width: 200px;
}

Ver ejemplo con elasticidad a la derecha

Ver ejemplo con elasticidad a la izquierda