CSS: dos columnas, alturas balanceadas con preferencia para la columna izquierda

Question

Tengo una lista ordenada de películas. Cada película tiene un nombre y una descripción. La duración de la descripción varía. Enumero las películas de uno en uno en dos columnas, más o menos así:

 
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. 

Lo anterior debería darle una idea de cómo se ve hoy en día. Actualmente estoy logrando esto tomando la lista de películas y dividiéndola por la mitad y luego renderizando cada una de las mitades y flotando las mitades una al lado de la otra.

¡Sin embargo hay un problema! Imagine el caso en que las películas de la columna derecha tienen descripciones más largas que las de la columna de la izquierda. ¡Entonces el equilibrio de altura estaría muy lejos!

¿Hay alguna forma que no sea de JavaScript para equilibrar este tipo de cosas? Si es así, ¿qué navegadores lo admiten?

Answer 1

Lamentablemente, la única forma no programática de desbordamiento de contenido es en estado borrador para CSS3. No hay una manera confiable de derramar contenido en una nueva columna en CSS2.1.

consulte el siguiente enlace para los proyectos de selectores desbordamiento de contenido:

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

Answer 2

Haz lo que eres pero usa una imagen de fondo que se repite con una línea en el centro del contenedor de los divisores de columna. Creo que esta técnica se llama "faux columns".