Ver Mensaje Individual
  #1 (permalink)  
Antiguo 14/06/2007, 11:11
The Stranger
 
Fecha de Ingreso: marzo-2006
Mensajes: 66
Antigüedad: 18 años, 1 mes
Puntos: 0
Problema CSS & Tablas

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!