Hoy después de mucho tiempo he vuelto a retomar la senda de la enseñanza.
Algo que siempre nos ha dado muchos dolores de cabeza ( sobre todo a mí ) al momento de maquetar nuestras páginas web, es el colocar un conjunto de capas (div) de forma continua dentro de otra capa.
Si bien una solución es el de definir la propiedad float:left o float:right, pues bien hoy y después de investigar un buen rato, he conseguido una forma un tanto más elegante de realizar este efecto sin mayores complicaciones y de forma más eficiente y menos dolorosa.
Se que hay muchas paginas y foros que hablan sobre esto, pero en verdad no había visto que emplearan esta solución y gracias a DIOS que mi afán de buscar siempre una forma más óptima de hacer las cosas me llevó hasta esta página que si bien ya la conocía y la he estudiado algo, no había prestado atención a las bondades de la propiedad display.
Solo hay que hacer los siguientes ajustes en nuestra css que definirá nuestras capas, el ejemplo que coloco es para tres columnas. Solo habría que ajustar el ancho de las columnas para insertar o eliminar capas.
CSS:
.capa1 {
...
width: 25%;
display: table-cell;
}
.capa2 {
...
width: 50%;
display: table-cell;
}
.capa3 {
...
width: 25%;
display: table-cell;
}
.capaPrincipal {
...
width: 100%;
display: table;
}
HTML:
capa class="capaPrincipal"
capa class="capa1" /capa
capa class="capa2" /capa
capa class="capa3" /capa
/capa
Por razones de código tuve que cambiar el div por capa y quitarle los < y >, pero la idea se entiende.
Hasta una próxima oportunidad.
PD: Estaré montando una serie de tutoriales de como programar en POO con php.
