Uy Perdón

Una de las cosas más difíciles de realizar en la maquetación mediante div’s y css’s es el hecho de igualar las columna en la mayoría de navegadores (lo que conocemos como Cross-Browser) sin ningún tipo de Hack o truco. Tras muchas páginas visitadas intentando dar respuesta esta necesidad encontré un artículo de Matthew james en su blog. El problema que plantea y su solución de tan sencillas que son sorprenden.

La estructura css es esta:

Column 1
Column 2
Column 3

El resultado de la css el siguiente:

#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}

Leer artículo completo