Consigli pratici per migliorare e gestire il proprio sito web
Il bravo Antonio Lupetti, nel suo articolo Really simple CSS trick for equal height columns ci spiega in modo semplice e veloce come realizzare un layout CSS che contenga due colonne di uguale altezza.
Il rischio infatti è quello di incorrere in una situazione come quella visualizzata nell'immagine sopra in cui la colonna con meno testo resta "appesa"e non segue la colonna con il maggior numero di caratteri.
Indubbiamente un difetto estetico che va risolto…
This tutorial describes a really simple CSS trick to implement a fake equal height columns effect using the CSS propertiesposition:absoluteandborder. Before to proceed I suggest you to download my CSS 2 Visual Cheat Sheet for a practical reference guide to CSS 2 properties that can help you understand concepts illustrated in this post.
Leggetevi la sua soluzione e vi sorprenderete di quanto sia semplice...
Che ne pensate? Voi come fate in questi casi?
La soluzione proposta ha un numero piuttosto alto di criticità, la più evidente riguarda l'impossibilità di inserire a seguito delle due colonne dell'altro contenuto che inevitabilmente finirebbe al di sotto delle colonne stesse e non a seguito come sarebbe corretto. Tra l'altro, con questa soluzione, nel caso in cui la seconda colonna avesse più contenuti della prima, la loro altezza non risulterebbe più la stessa, ma la seconda sarebbe più lunga della prima vanificando il risultato.
E' una soluzione, ma a mio parere non è la migliore: il position: absolute è sempre meglio evitarlo. Molto meglio usare i float o i falsi background.
Blogosfere è il più grande network italiano di blog professionali d'informazione.
Qui puoi trovare le ultime news su cronaca, politica, economia, cultura, scienze, tecnologia, spettacoli, moda, sport, motori, viaggi e cucina prodotte in perfetto stile multimediale.
Blogosfere Srl socio unico
P. IVA 05221970964
Sede legale: Via Pordenone 8 20132 Milano
REA n. 1804860
Privacy
Condizioni di utilizzo
Copyright © 2005-2012 Blogosfere
Quest'opera è pubblicata
con licenza Creative Commons
Attribution - Non commercial - No derivates
Per informazioni pubblicitarie e progetti speciali su Blogosfere (media brand del gruppo Populis) contattare la concessionaria pubblicitaria del gruppo, Populis Engage
alle 15:24
Paolo
grazie per il contributo Okram69
tu che metodo useresti allora?