CSS - Multicolumn lists

I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?

Chris Stout wrote:

I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?

Small example with fixed width in px ignoring accessibility here for a
moment. We have the following unordered list:

<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
</ul>

That is the markup. Now it is time to style:

ul{
margin:0;
padding:0;
list-style:none;
width:600px;
}
ul li{
margin:0;
padding:0;
display:block;
float:left;
width:200px;
}

That is it, I hope :-)


--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Brian wrote:

Chris Stout wrote:


problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.


You mean you want a list to go down the screen, and then start again at
the top of the next column? Quite a bit more difficult then you might
imagine.

element{
float:top; /* [1] */
}

I want CSS3 now!

[1] <http://www.w3.org/TR/2002/WD-css3-box-20021024/#float>

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

*Chris Stout*:

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists.

I've a test page for this at
<http://webdesign.crissov.de/temp/multicol-lists>, the English original is
at <http://www.fu2k.org/alex/css/cssjunk/ListColumns.mhtml>.

--
"Show me a sane man and I will cure him." -- C.G. Jung

On 17 Dec 2003 06:11:35 -0800, chris (AT) williamsburg (DOT) com (Chris Stout)
wrote:

I'm a system developer and won't even pretend that I'm a designer, but
I want to move our graphics designers off of "old way" of hacking html
to get desired results, to marking up documents according to current
web standards.

I've been trying to design on of our new pages myself, but the biggest
problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate. I've tried setting the li tag to display:inline, and setting
a fixed width, but I guess the width doesn't go along with the inline
attribute. Has anyone had experience with this?

You might like to look at
http://www.members.iinet.net.au/~abell1/oboe.htm

and associated pages which have the alphabet in three columns + a
blank, and another list below.
Please note that I can't make it work reliably with MSIE for the Mac,
though it does work in MSIE 5.5, Opera 7.23, Mozilla 1.3, and Netscape
6.2

Regards, Alex

Anne van Kesteren <mail (AT) annevankesteren (DOT) nl> wrote

Brian wrote:

Chris Stout wrote:


problem I'm running into is trying to create multicolumn lists. I
have a list of items, which is most definitely a list, not a table,
but I can't for the life of me figure out how to display a list in
three columns. The main reason I want to do this, is for screen real
estate.


You mean you want a list to go down the screen, and then start again at
the top of the next column? Quite a bit more difficult then you might
imagine.

element{
float:top; /* [1] */
}

I want CSS3 now!

Hell, I want CSS2 now.