CSSLab

Como Caja 2: superando el modelo

Tweet

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