CSS: due colonne, altezze bilanciate con preferenza per la colonna sinistra

Question

Ho un elenco ordinato di film. Ogni film ha un nome e una descrizione. La lunghezza della descrizione varia. Ne elenco i film uno dopo l'altro in due colonne, più o meno in questo modo:

 
1. Blues Brothers      | 4. Lord of the Rings 
    Cheesy movie about two guys.  |  A hobbit and his buddies go 
             |  to destroy some ring. 
2. Jurassic Park.      | 
    Some guy makes dinosaurs and some | 5. Can't Think Of Any More 
    chick uses 3D UNIX!     |  Lorem ipsum dolor sit amet. 
             |  Dolor sit amet lorem ipsum!!! 
3. Wayne's World      | 
    Party movie deluxe!     | 6. This Is The Last 
             |  Now we're not balanced! 
             |  Pretty messed up. 

È possibile che questo dovrebbe darvi un'idea di come appare oggi. Al momento sto facendo questo prendendo la lista dei film e dividendola a metà, quindi eseguendo il rendering ogni metà a turno e facendo fluttuare le metà l'una accanto all'altra.

C'è comunque un problema! Immagina il caso in cui i film nella colonna di destra hanno tutti una descrizione più lunga di quelli nella colonna di sinistra. Quindi il bilanciamento dell'altezza sarebbe lontano!

Quindi c'è qualche modo non JavaScript per rendere equilibrato questo tipo di cose? Se sì, quali browser lo supportano?

Answer 1

Sfortunatamente, l'unico modo non programmatico per l'overflow del contenuto è in stato bozza per CSS3. Non esiste un modo affidabile per svuotare il contenuto in una nuova colonna in CSS2.1.

vedi il link di seguito per il progetto di selettori overflow contenuto:

http://www.w3.org/TR/css3-multicol/

Answer 2

Fai come sei ma usa un'immagine di sfondo ripetuta con una linea in basso al centro per il contenitore delle div di colonna. Credo che questa tecnica si chiami "faux columns".