Home/ Questions/Q 5966297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T19:46:42+00:00

I am having a lot of difficulty using the CSS 3 columns style. I’m

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0