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"><br />
     <p>Lorem ipsum dolor sit amet.................</p><br />
  </div><br />
  <div id="menu"><br />
     <ul><br />
          <li>Uno</li><br />
          <li>Dos</li><br />
     </ul><br />
  </div>

Y el CSS muy primitivo pero funcional:

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

Ver ejemplo funcionando{.verejemplo}

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

y al