Ver Mensaje Individual
  #3 (permalink)  
Antiguo 31/10/2010, 01:08
Mariela_Fiad
 
Fecha de Ingreso: octubre-2010
Mensajes: 31
Antigüedad: 13 años, 5 meses
Puntos: 0
Respuesta: Layout estilo tablas pero con CSS

No, no es una imagen estoy haciendo que cada div se comporte como un elemento de una tabla, por ejemplo div id="contenedor" es el <table> que con {display: table} hago que se comporte así, div id="contenidos" es el <tr> (el que hace las filas en este caso es de una sola fila), lo consigo dando a contenido {display: table-row}. Y por último las dos columnas laterales y el contenido principal serían las columnas <td> que lo logro con agregando {display: table-cell}, ajusto el ancho de las tres (div id="columna_1", div id="principal", div id="columna_2") para que quepan cómodamente, uso porcentajes en éste caso.
Si del mismo modo que yo todo es una gran tabla de una sola fila, tres columnas y cada contenido (en mi caso tres) son grandes celdas,
lo hago para que todo tenga un aspecto homogéneo, esté alineado verticalmente. Que cada columna llegue hasta el final de la columna más extensa. O si el contenido principal es muy extenso, que las columnas lleguen hasta el final del contenido principal. La única desventaja es que las tres columnas (en éste caso) comparten el mismo padding-top. No puedo personalizar desde padding el espacio quiero vaya entre el contenido y borde de la caja, pero ya encontré otra forma de sustituirlo. De todos modos si sabes/n una forma de anular este comportamiento (que las celdas de una tabla compartan padding-top), agradecería que me lo hagan saber.

El modo de sustitución que use fue el que comenté antes. Mi objetivo es que el contenido central comience más abajo que el de las columnas, ósea que tenga un mayor padding-top así que agregué al xhtml dentro de el div="principal" otro div que por contenido tiene saltos de linea lo cerré y en el css le puse por declaración { white-space: pre-wrap}, también podría haber usado <br /> o <p></p>. Pero creo que esta es mejor.


Aquí puedes ver como hacer la estructura general de una web estilo tablas pero usando CSS.
http://www.librosweb.es/css_avanzado/capitulo1/elementos_de_la_misma_altura.html
Saludos