Webizzima - Le ofrecemos al mundo contenido profesional y de avanzada visión para usuarios que buscan grandes horizontes. Todo a la distancia de un clic y en español.

Esta es una nueva sección que crearemos donde apareceran pequeños tips sobre bugs, errores, y mejoras que pueden surgir, cuando se programa en CSS. Apareceran en la sección de MiniTips, bajo la categoria CSS. Bueno aqui les va el minitip #1.

Empezaré con un tipico ejemplo. Un diseño de 3 columnas, un header y un footer. Algo asi:

Cuando creamos algo como esto, el mayor reto lo representa el mostar el contenido en columnas una al lado de la otra; existen varios métodos para esto, siendo el más usando el conocido float.  Digamos que nuestras columnas con id column1, column2, y column3 tendrian declaradas sus respectivas referencias en css asi:

#column1
{
width: 200px;
float: left;
}

#column2
{
width: 500px;
float: left;
margin-left: 8px;
}

#column3
{
width: 200px;
float: left;
margin-left: 8px;
}

Con esto, nuestras columnas estarán flotadas a la izquierda, una despues de la otra, y separadas por un margen izquierdo aplicado a la segunda y tercera columna.

Todo parece perfecto, verdad? Pues no. En nuestro querido Internet Explorer 6, esto provoca un doble margen, o sea, que nuestro margen izquierdo sera 16px por cada uno, lo cual, empujará la tercera columna hacia la proxima linea debajo.

Para que se entienda mejor, he puesto los margenes en rojo, y nuestra tercera columna es la que tiene el margen rojo de la derecha aplicado. Si lo medimos, verán que no cabe.

La solución? Tan rapido?, no quieren romperse la cabeza un poco más, y tirar el monitor contra la pared? No? entonces la solución es tan simple que nos daria risa.

#column1
{
width: 200px;
float: left;
}

#column2
{
width: 500px;
float: left;
margin-left: 8px;
display: inline;
}

#column3
{
width: 200px;
float: left;
margin-left: 8px;
display: inline;
}

Agregandole display: inline; a las columnas con el margen aplicado, logrará que Internet Explorer 6 entienda que son solo 8px, y no 16px. Notese que este bug solo sucederá si, se flota una columna en la misma dirección que el margen aplicado. O sea, float: left, margin-left.

Espero que les sea de utilidad. Es bien básico, pero muchas personas se rompen la cabeza con cositas asi pequeñas. Para eso son estos minitips.

Saludos