Como Caja 2: superando el modelo

19/jul/2007 4

En el artículo donde explico de qué se trata y cómo nos afecta el modelo de caja al construir un layout con CSS, se pueden sacar algunas conclusiones, las que en realidad dejo bien claro: utilizar el reseteador universal, tratar de no definir anchos a los div‘s y el más importante, no darle padding al div u otro elemento contenedor (para no deformarlo). Con esas 3 simples reglas podemos superar bastante este inconveniente, pero me interesa entregar una recomendación para que se pueda sintetizar un poco nuestro layout y al mismo tiempo ahorrar un poco de código, logrando además más control sobre nuestra diagramación.

Un HTML con 2 columnas:

<div id="contenido">
     <p>Lorem ipsum dolor sit amet.................</p>
</div>
<div id="menu">
     <ul>
          <li>Uno</li>
          <li>Dos</li>
     </ul>
</div>

Y el CSS muy primitivo pero funcional:

div#contenido {
     width: 500px;
     background: #CCC;
}
div#menu {
     width: 180px;
     background: #F00;
     margin-left: 20px;
}
div#menu ul {
     margin: 10px 20px;
}
div#contenido, div#menu {
     float: left;
}

Ver ejemplo funcionando

Como apreciarán, los contenedores encajan y no se desarma nada. Como se predijo funciona perfecto. Ahora, lo que se hará es darle padding al <p> y al <ul> para que se despegara un poco de los bordes, pero esto puede traer inconvenientes: ¿Qué pasa si tenemos más de un <p>? ¿Qué pasa con otros elementos que agreguemos, <h1>, <a>, <img />? ¿Debemos darle el padding a todos siempre? Un lío tras otro… en ese caso, lo que haré será agregar otro div dentro de los contenedores, los que tendrán una class que tendrá solamente el padding que necesitamos. Así, este div rodeará todos los elementos necesarios para dar ese margen interior a nuestras cajas. El HTML modificado:

<div id="contenido">
     <div class="marginado">
          <p>Lorem ipsum dolor sit amet.................</p>
     </div>
</div>
<div id="menu">
     <div class="marginado">
          <ul>
               <li>Uno</li>
               <li>Dos</li>
          </ul>
     </div>
</div>

Y el estilo para esa modificación:

div#contenido {
     width: 500px;
     background: #CCC;
}
div#menu {
     width: 180px;
     background: #F00;
     margin-left: 20px;
}
div#menu ul {
     margin: 10px 20px;
}
div#contenido, div#menu {
     float: left;
}
div.marginado {
     padding: 10px;
}

Y si en el caso que necesitáramos darle diferentes padding a cada caja, lo especificamos en el CSS:

div#contenido div.marginado {
     padding: 10px;
}
div#menu div.marginado {
     padding: 20px;
}

Ver ejemplo final

Comentarios

  1. luis [#]

    bueno

  2. Toni :M: [#]

    Muy interesante, hay que ver la de cosas que me estás resolviendo con las entradas de tu blog…
    Para los que nos estamos sueltos en estas artes del CSS, nos sirve de gran ayuda. Desde aquí te envío muchos animos para continuar con esa maestría.

  3. pau [#]

    Muy bueno..!!

    No he encontrado nadie que lo haya explicado tan bien como tu.

    Enhorabuena..!!

    un saludo

  4. CSSLab » Review 5: DivIt [#]

    […] que contenga estas propiedades, entre la caja de layout y el contenido mismo de la caja, tal como recomendé hace un tiempo atrás. ¿Pero si entre cajas hay un border-right, y luego un margin-right? Eses son casos de […]

Deja tu Comentario

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

CSSLab