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:
<div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div>
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;
}