# Multicolumned Lists

**URL:** <https://forum.kirupa.com/t/multicolumned-lists/155584>\
**Category:** Uncategorized\
**Created:** [July 18, 2005, 11:29pm UTC](https://forum.kirupa.com/t/multicolumned-lists/155584 "2005-07-18T23:29:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![icio](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/icio/32/484_2.png) [@icio](https://forum.kirupa.com/u/icio)\
**Post date:** [July 18, 2005, 11:29pm UTC](https://forum.kirupa.com/t/multicolumned-lists/155584/1 "2005-07-18T23:29:25Z")

</div>

I’ve been trying out site design recently and decided that i wanted to have a multicolumned list but wasn’t able to attain my desired effect using css, so i wrote this little javascript that can incorporate css.

it’s very simple to use. here is the html document:

```auto
<html><head><title>Multi-Columned List by Paul Scott (paul.scotto@gmail.com)</title>
<style type="text/css">ul { float: left; clear: right; width: 60px;} body { font-family: "verdana"; font-size: 12px; }</style>
<script language="JavaScript">
	
	//THESE ARE THE VARIABLES YOU EDIT:
	var items = [["1", "?1"], ["2", "?2"], ["3", "?3"], ["4", "?4"], ["5", "?5"], ["6", "?6"], ["7", "?7"], ["8", "?8"], ["9", "?9"], ["10", "?10"]];
	var columns = 3;
	var fillStyle = 1;
	
function writeList() {
var contentArray = [];
for (i=0; i<columns; i++) { contentArray* = []; }

if (fillStyle == 1) {
var offset = 0;	for (i=0; i<columns; i++) { var itemsinCol = Math.ceil((items.length-offset)/(columns-i)); for (j=offset; j<itemsinCol+offset; j++) { contentArray*.push(items[j]); } offset += itemsinCol; }
} else if (fillStyle == 2) {
for (j=0; j<items.length; j++) { contentArray[j%columns].push(items[j]);}
} else { fillStyle = 1; writeList(); return; }

for (i=0; i<contentArray.length; i++) { 
document.write("<ul>");
for (j=0; j<contentArray*.length; j++) { document.write("<li><a href=\""+contentArray*[j][1]+"\">"+contentArray*[j][0]+"</a></li>"); }
document.write("</ul>"); } }

</script></head><body>

<script language="JavaScript">writeList();</script>

</body></html>

```

`items` is an array containing the information you want in the list. each item is an array with two items inside it. item\*[0] is the displayed text and item\*[1] is the link.

`columns` is the number of columns to display in the text

`fillStyle` is how the list is display, for example you may want your list to look something like this:

```auto
(fillStyle = 1):
a d g
b e h
c f

```

of

```auto
(fillStyle = 2):
a b c
d e f
g h

```

this is a very flexibile script so i kept it pretty simple for your customisation benefits. enjoy :thumb:
