CSS: Deux colonnes, hauteurs équilibrées avec une préférence pour la colonne de gauche

Question

J'ai une liste ordonnée de films. Chaque film a un nom et une description. La longueur de la description varie. Je liste les films un par un dans deux colonnes, à peu près comme ceci:

 
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. 

ci-dessus devrait vous donner une idée de la façon dont il semble aujourd'hui. J'accomplis actuellement cela en prenant la liste des films et en la divisant en deux, puis en rendant chaque moitié à tour de rôle et en faisant flotter les moitiés l'une à côté de l'autre.

Il y a un problème cependant! Imaginez le cas où les films dans la colonne de droite ont tous des descriptions plus longues que celles de la colonne de gauche. Alors l'équilibre de taille serait loin!

Ainsi est-il un moyen non JavaScript pour faire ce genre de chose équilibrée? Si oui, quels navigateurs le supportent?

Answer 1

Malheureusement, la seule façon non programmatique à déborder le contenu est en état de projet pour CSS3. Il n'y a aucun moyen fiable de déverser du contenu dans une nouvelle colonne dans CSS2.1.

Voir le lien ci-dessous pour les projets de sélecteurs déborder le contenu:

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

Answer 2

Est-ce que vous êtes, mais utiliser une image de fond à répétition avec une ligne au centre pour le conteneur de la colonne divs. Je crois que cette technique est appelée "faux columns".