Problema CSS & Tablas

[The Stranger]

Mi problema es "sencillo"...

Estoy desarrollando un sitio con ancho definido "fixed layout"; éste ancho varía segun la resolución del usuario (800 ó 1024 pixeles segun el monitor). Tiene 2 columnas flotantes a cada lado y un contenedor principal con márgenes (una estructura bastante sencilla y común):

--------------------
| | | |
| | | |
| | | |
| | | |
| | | |
--------------------

Ahora bien, mi objetivo es tener otras 2 columnas adentro de mi contenedor (cada una tendrá una imagen e información). Quiero que se mantengan también centradas y equidistantes con mis 2 columnas flotantes.

No soy amigo de las tablas (solo las utilizo para lo que son: para tabular información), sin embargo con ellas bastaría algo así:

Código:

<div id="contenedor">
<table style="width:100%">
 <tr>
  <td style="text-align:center">IMAGEN E INFO</td>
  <td style="text-align:center">IMAGEN E INFO</td>
 </tr>
</table>
</div>

También he intentado flotar otra columna adentro del contenedor, y hacer la otra con un simple <div>, sin embargo la columna flotante no se mantiene equidistante como con la tabla, además no puedo agregar más contenido abajo de estas 2 columnas internas porque no puedo uitlizar "clear:both" (al hacerlo mi contenido se baja todo, pasando mis 2 columnas flotantes principales, ésto es un gran problema, me limita a no usar float). (cabe mencionar que mi contenido es dinámico y por lo tanto la altura de las 2 columnas internas es variable)


Tampoco quiero utilizar "display:table"..etc en mis divs, no quiero que los <divs> emulen tablas (ademas IE7 no soporta ya estas propiedades CSS).

Estarán de acuerdo que lo que quiero no es tabular información, ésto lo debería hacer con <divs> y CSS y no con tablas.

Finalmente me gustaría (de ser posible) que cuando se cambie el tamaño de la pantalla (se haga más angosta) y las 2 columnas internas no quepan en el espacio nuevo se coloque una debajo de otra. (se que con float se podría lograr algo así pero no lo puedo utilizar, mi pregunta también es ¿es posible este comportamiento con tablas?, ¿qué las celdas se coloquen una abajo de otra una ves que se agotó el espacio?).

Bueno, de antemano quiero dar las gracias a todos los que me ayuden o contribuyan con este problema.

Gracias!

[programeitor]

display:table

No puedo creer que exista tal cosa. ,·un estilo para hacer tablas·, ¿no es como la serpiente que se muerde la cola ,o algo asi?

[The Stranger]

Así es, existe pero IE no lo permite... He aquí un pequeño ejemplo:

CSS

Código:

<style type="text/css">
div.table {
display:table;
width:100%;
}

div.tr {
display:table-row;
}

div.td {
display:table-cell;
}
</style>

HTML

Código:

<div class="table">
 <div class="tr">
  <div class="td">
   Celda #1
  </div>
  <div class="td">
   Celda #2
  </div>
  <div class="td">
   Celda #3
   </div>
 </div>
</div>

Pero hacer esto es la peor forma de utilizar los <divs> :S, es como maquetear un sitio con tablas. Un saludo!

[k4k4]

Hola,

no entendí a la perfección el tipo de layout que estas tratando de lograr. Si manejas un fixed layout una opción es flotar todo y declarar a todas las columnas el width, todo bien medido y usar margenes para mantener las distancias iguales.

Tienes algún demo?

Saludos,

k4

[The Stranger]

Bueno, resulta dificil que yo explique tantas cosas y no ponga ni una imagen...

He particionado mi problema en varios "sub-problemas", postearé el primer sub-problema como un nuevo tema.

Gracias!