CSS3 Column Balancing for Gecko 1.9

Question

I am having a lot of difficulty using the CSS 3 columns style. I'm using Firefox 3.6 which should support the -moz-column layout.

I have a list of items and I'm trying to render them in 2 columns, top to bottom. To assist my internal sorting algorithm, the very first list item is a sub list.

my css uses this

.container{
  -moz-column-width:635; //slightly wider than the list item we're displaying
  -moz-column-rule:1px solid;
}
.sub_list{
  width:50%;
  display:list-item;
}
.item{
  overflow:hidden;
  padding:0;
  margin:0;
  display:list-item;
  width:634px;
}

Unfortunately my list is displaying as a single column list or a multi column layout where each <li> is marked float:left; but which isn't sufficient since it orders thusly:

1  2
3  4
5  6

This isn't what I need, and it looks absolutely hideous because list item 1 is itself a list.

The examples I have found all seem to order the list items vertically and they don't use any additional tags: http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html and/or https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions .

Can anybody tell me what I'm doing wrong? Maybe I'm failing to understand the layout engine properly.

Answer 1

It's been requested that I officially "answer" this question so I'm moving my answer from the comment to an answer.

After nearly a full day of research and tinkering I finally tinkered my way to the answer about five minutes after posting the question.

I removed all display/position related styles for .item. Whether or not any of them are actually compatible with Column format I don't know. You'll have to experiement with it or ask someone more knowledgable.

I gave .container a fixed height.