Resolver el problema de dividir en columnas en IE7

JMiur

Cuando dividimos un rectángulo en columnas usando procentajes pueden surgir problemas, sobre todo, en versiones de Internet Explorer inferiores a la 8 así que para responder a ese dilema trataremos de encontrar explicaciones y alguna forma de resolverlos.

Veamos otra vez el esquema mostrado en la entrada anterior:

.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
  <div class="fdizquierda1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdizquierda2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdderecha2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Esto, que deberíamos ver así:

en IE7 lo veremos así:

Todo es un tema de aritmética. La pantalla se mide en pixeles y los pixeles son indivisibles así que si el ancho del rectángulo no es un número divisible con exatitud, habrá un resto con el que deberemos lidiar.

Si dividimos por 3 y usamos 33% para cada uno, hay un 1% que sobra así que es difícil que haya problemas pero, si dividimos por dos, por cuatro o por algún otro número ... las matemáticas nos podrían jugar una mala pasada.

Por ejmplo, en este caso, el ancho total (el 100%) es de 635 pixeles así que si lo divido en cuatro, cada recángulo interior (el 25%) tendría que tener 158.75 pixeles cosa que es imposible ya que no existen fracciones de pixeles y el navegador redondea ese valor; me dirá que cada rectágulo interno tiene 159 pixeles y eso, hará que en IE7 no veamos uno al lado del otro sino que uno de ellos, se irá para abajo ya que:

159 + 159 + 159 + 159 = 636

¡Ese maldito pixel que sobra nos arruinará el diseño y nos volverá locos!!!

Soluciones hay varias y todas son molestas. Podemos calcular el ancho real y cambiar los porcentajes por valores absolutos teniendo en cuenta que la suma de ellos no supere el total:

159 + 159 + 159 + 158 = 635

Podemos elegir uno cualquiera de esos rectángulos internos y poner 24% en lugar de 25% o incluso poner width:24.9%; dependerá de cual sea el resto

.fdderecha2 {float: left; width: 24.5%;}

Por último, también podríamos usar un comentario condicional que agregaremos antes de </head>:

<!--[if lt IE 8]>
  <style> .fdderecha2 {width:24.5%;} </style>
<![endif]-->

Así que esto, debería verse bien, incluso en IE7:

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.