CSS: Two columns, balanced heights with preference for the left column

Question

I have an ordered list of movies. Each movie has a name and a description. The description length varies. I list the movies one by one in two columns, roughly like this:

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.

The above should give you an idea of how it looks today. I'm currently accomplishing this by taking the list of movies and splitting it in half and then rendering each half in turn and floating the halves next to each other.

There is a problem however! Imagine the case where the movies in the right column all have longer descriptions than those in the left column. Then the height balance would be way off!

So is there any non-JavaScript way to make this kind of thing balanced? If so, which browsers support it?

Answer 1

Do as you are but use a repeating background image with a line down the centre for the container of the column divs. I believe this technique is called "faux columns".

Answer 2

Unfortunately, the only non-programmatic way to overflow content is in draft status for CSS3. There is no reliable way to spill content into a new column in CSS2.1.

See the link below for the draft selectors to overflow content:

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