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;
}
Posts relacionados
-
1 diciembre, 2015 -
12 agosto, 2015 El robot de Google no puede acceder a los archivos CSS y JS
-
23 noviembre, 2010 Menu interactivo estilo flash pero hecho con xhtml, css y javascript
Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.
Archivo
- diciembre 2015 (6)
- noviembre 2015 (5)
- octubre 2015 (3)
- septiembre 2015 (2)
- agosto 2015 (8)
- mayo 2015 (2)
- abril 2015 (3)
- julio 2013 (1)
- julio 2012 (1)
- enero 2012 (3)
- diciembre 2011 (3)
- noviembre 2011 (1)
- febrero 2011 (5)
- noviembre 2010 (4)
- septiembre 2010 (2)
- julio 2010 (1)
- junio 2010 (2)
- marzo 2010 (6)
- febrero 2010 (3)
- enero 2010 (1)
- diciembre 2009 (6)
- noviembre 2009 (2)
- octubre 2009 (18)
- septiembre 2009 (21)
Deja una contestación