Come si replica questo layout a 3 colonne senza utilizzare una tabella?

Question

Sentirsi un po 'frustrati per non essere in grado di capire correttamente questo fuori. Sto aggiornando un vecchio sito e sto cercando di farlo funzionare senza tabelle. Posso farlo con box flex ma non supportato da molti browser. Il layout è qualcosa di simile

[col-1-as-piccolo-come-possibile] [col-2-dovrebbe-uso-all-spazio ] [col-3-as-piccola-come- possibile]

Le colonne non devono necessariamente avere la stessa altezza e la larghezza complessiva di tutte e 3 le colonne combinate è vincolata da un genitore.

Se utilizzo float, non riesco a espandere la colonna centrale. La larghezza di col-1 e col-2 è non larghezze fisse.

Eventuali soluzioni che non si sentono peggio del problema (tabelle)?

ecco un esempio della soluzione basata tavolo: http://jsfiddle.net/7dsCV/1/

Answer 1

Si tratta di una soluzione di strano, ma l'impostazione overflow: hidden al centro div ti darà quello che ti credo voglia:

http://jsfiddle.net/qrBXL/

ho in mente di capire perché questo accade, ma non hanno ottenuto tutt'intorno. La mia ipotesi migliore è che lo overflow funzioni solo su contenitori rettangolari e il rendering a virgola mobile all'interno di div lo rende essenzialmente non rettangolare.

Answer 2

Quando si dice "piccolo possibile" Continuo a pensare che hanno una larghezza fissa. Sarebbe male avere diverse larghezze tra le pagine. Detto questo, puoi guardare questo articolo per un ottimo esempio di un layout che si prende cura di molti problemi: http://www.alistapart.com/articles/holygrail/ Se non vuoi approfondire tutto, alla fine hai tutto codice, pronto per essere copiato & incollato.