Layout Híbrido

27/jul/2007 13

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).

SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

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:

<div id="header">
     <h1>Encabezado</h1>
</div>
<div id="menu">
     <h1>Menu Lateral</h1>
     <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
     </ul>
</div>
<div id="content">
     <h1>Contenido Principal</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer ……….</p>
</div>

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

Comentarios

  1. Fokker [#]

    Como harías para que las columnas no se superponiesen cuando el ancho de la ventana es pequeño. Yo probé con min-width en una columna y funciona a medias, yo creo que quizas dandole a las dos columnas resultaria pero no en IE6.

  2. Buzu [#]

    Yo tengo un layout similar pero tengo el problema de que si la ventana se hace muy pequena se me desaparece uno de los divs, no he puesto atencion a esto ya que ese es un problema menor que puedo resolver al final. La diferencia es que yo use float en lugar de position.

  3. daTO [#]

    Yo uso mucho position, pero siempre tengo un problema, y es que si fuera del content, añado otro div que sea el pie, sin posicionarlo absolutamente por que no se cuanto medirá el contenido, se me va a la parte de arriba, al inicio de la pagina.

    Lo puedo arreglar suponiendo la altura del contenido, pero si el usuario aumenta el tamaño de texto, por ejemplo, se me destroza todo..

    Alguna idea?

  4. CSSLab Admin [#]

    daTO, podrias echar una leida a mi articulo aanterior donde trato precisamente el tema de position. y si facilitas un link desde donde ver tu problema, me seria mas facil darte una solucion. position tiene un detalle, similar a float, donde su contenedor colapsa si todos los elementos interiores estan posicionados, y no existe un clearfix para position. en ese caso, y creo q es el tuyo, solo basta con q una de tus columnas (generalmente la q soporta el contenido) no este con absolute, sino con relatie (y por lo tanto utiliza margin para dejarlo donde necesites). suerte.

  5. CSSLab Admin [#]

    Fokker, buena pregunta. IE6 no soporta win-width o min-height, pero se q hay unos hacks para qq si los permita. deberia de revisar por ahi algo, y te aviso.

  6. daTO [#]

    Gracias Admin, con relative y margin para una de las columnas se evita el colapso !!!

    Genial, el blog…

  7. gABRIELA [#]

    ME LO PIDEN EN BANAMEX PARA PODER BAJAR MIS TRANSFERENCIAS Y ME DICEN QUE NECESITO SABER DE PROGRAMACION

  8. Verónica [#]

    Sencillamente genial… justo lo que estaba buscado. Felicitaciones.

  9. Xema [#]

    ¿y si las dos columnas las queremos meter dentro de un div?
    me explico (xq no lo tengo online) un div contenedor (que varia de tamaño, según necesidades expresado en px) y dentro del contenedor la columna derecha fija y la izquierda que fluya hasta el resto del tamaño del contenedor… he probado con el position: relative; pero entonces ya no me respetan el formato y el div izquierdo coje el 100% del ancho y desplaza a la siguiente línea a la columna derecha.

  10. CSSLab Admin [#]

    Xema, me interea responderte pero se me hace dificil leyendo lo q describes; porq no lo publicas junto a un ejemplo en codigo en los foros? quizas yo u otro usuario pueda ayudarte. saludos.

  11. Itákora » Blog Archive » Lecturas recomendadas (5) [#]

    […] La pregunta del millón: ¿utilizar ancho fijo, líquido o elástico? ¿O mejor uno híbrido? […]

  12. karen leteer [#]

    que es lay -out

  13. itákora » Lecturas recomendadas (5) [#]

    […] La pregunta del millón: ¿utilizar ancho fijo, líquido o elástico? ¿O mejor uno híbrido? […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab