Question : Javascript Transform rows and columns

I have an alphabetic list and a variable width web page.

I output each element in the list in h4 tags. Using style="width: 180px; float: left;" Each item displays across the page, fitting as many columns as it can, then wrapping to the next line. This creates a nice layout plus when I resize the browser, I get fewer columns and more rows but keep the nice layout.

The only problem is that the items are alphabetical in each row and I want them alphabetical in each column.

This is the layout I have:
a b c d e f
g h i j k l
m n o p q r
s t u v

This is the layout I want:
a e i m q u
b f j n r v
c g k o s
d h l p t

My idea was to grab the list via javascript and re-write it in column order using appendChild but it doesn't work. Please advise.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:



<html><head>
<title>Transform</title>
<style>
#nav { width: 906px; background-color: #f0f0f0; }
#nav h4 {
	color:#336699;
	display:block;
	font-size:13px;
	font-weight:normal;
	height:22px;
	margin:0;
	text-decoration:none;
	width:180px;
}
#nav .col { clear: left; float: left; background-color: red }
</style>
</head>

<body>

<div id="nav">
	<h4>Assign</h4>
	<h4>Additional Functions</h4>
	<h4>Array_Elements</h4>
	<h4>Availgroup</h4>
	<h4>Basket</h4>
	<h4>BasketButtons</h4>
	<h4>BasketCombined</h4>
	<h4>Benchmark</h4>
	<h4>BreadCrumbs</h4>
	<h4>Call</h4>
	<h4>Compress</h4>
	<h4>Counter</h4>
	<h4>Cookie</h4>
	<h4>CurrencyFormat</h4>
	<h4>Custom_Category</h4>
	<h4>Custom_Customer</h4>
	<h4>Custom_Products</h4>
	<h4>Datetime_Format</h4>
	<h4>Datetime_Value</h4>
	<h4>Do</h4>
	<h4>Eval</h4>
	<h4>Event_Timer</h4>
	<h4>For</h4>
	<h4>hasAttributes</h4>
	<h4>Lookup|Header Footer</h4>
	<h4>Lookup|Login</h4>
	<h4>Lookup|SQL</h4>
	<h4>NumberFormat</h4>
	<h4>OrderSubtotal</h4>
	<h4>PercentFormat</h4>
	<h4>Pricegroup</h4>
	<h4>PreAction PostAction</h4>
	<h4>Query</h4>
	<h4>Random_Numbers</h4>
	<h4>Reference</h4>
	<h4>RememberMe</h4>
	<h4>Screen</h4>
	<h4>SearchArray</h4>
	<h4>SearchText</h4>
	<h4>SendEmail</h4>
	<h4>Trace</h4>
	<h4>SortArray</h4>
	<h4>SortCSV</h4>
	<h4>StripHTML</h4>
	<h4>Structure</h4>
</div>

<script type="text/javascript">
var i = 0;
var nav = document.getElementById("nav");
var nav_h4 = nav.getElementsByTagName("h4");
var nav_items = nav_h4.length;

var nav_width = 906;
var navh4_width = 180;
var nav_cols = Math.floor(nav_width / navh4_width); //5 cols
var nav_rows = Math.ceil(nav_items / nav_cols);     //9 rows

var currow = 0;

var div = new Array()
for(c=0; c<nav_cols; c++) {
	div[c] =document.createElement("div");
	div[c].className="col";
	
	for(r=currow; r<currow+nav_rows; r++){
		if(nav_h4[r]) {
			div[c].innerHTML = div[c].innerHTML + nav_h4[r];
		}
	}
	currow = currow + nav_rows;
}
nav.innerHTML = ""
for(c=0; c<nav_cols; c++) {
	nav.appendChild( div[c] );
}	
</script>

</body>
</html>

Answer : Javascript Transform rows and columns

Like this?

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:



<html><head>
<title>Transform</title>
<style>
#nav { width: 906px; background-color: #f0f0f0; }
#nav h4 {
    color:#336699;
    display:block;
    font-size:13px;
    font-weight:normal;
    height:22px;
    margin:0;
    text-decoration:none;
    width:180px;
}
#nav .col { clear: left; float: left; background-color: red }
</style>
</head>

<body>

<div id="nav">
    <h4>Assign</h4>
    <h4>Additional Functions</h4>
    <h4>Array_Elements</h4>
    <h4>Availgroup</h4>
    <h4>Basket</h4>
    <h4>BasketButtons</h4>
    <h4>BasketCombined</h4>
    <h4>Benchmark</h4>
    <h4>BreadCrumbs</h4>
    <h4>Call</h4>
    <h4>Compress</h4>
    <h4>Counter</h4>
    <h4>Cookie</h4>
    <h4>CurrencyFormat</h4>
    <h4>Custom_Category</h4>
    <h4>Custom_Customer</h4>
    <h4>Custom_Products</h4>
    <h4>Datetime_Format</h4>
    <h4>Datetime_Value</h4>
    <h4>Do</h4>
    <h4>Eval</h4>
    <h4>Event_Timer</h4>
    <h4>For</h4>
    <h4>hasAttributes</h4>
    <h4>Lookup|Header Footer</h4>
    <h4>Lookup|Login</h4>
    <h4>Lookup|SQL</h4>
    <h4>NumberFormat</h4>
    <h4>OrderSubtotal</h4>
    <h4>PercentFormat</h4>
    <h4>Pricegroup</h4>
    <h4>PreAction PostAction</h4>
    <h4>Query</h4>
    <h4>Random_Numbers</h4>
    <h4>Reference</h4>
    <h4>RememberMe</h4>
    <h4>Screen</h4>
    <h4>SearchArray</h4>
    <h4>SearchText</h4>
    <h4>SendEmail</h4>
    <h4>Trace</h4>
    <h4>SortArray</h4>
    <h4>SortCSV</h4>
    <h4>StripHTML</h4>
    <h4>Structure</h4>
</div>

<script type="text/javascript">
var i = 0;
var nav = document.getElementById("nav");
var nav_h4 = nav.getElementsByTagName("h4");
var nav_items = nav_h4.length;

var nav_width = 906;
var navh4_width = 180;
var nav_cols = Math.floor(nav_width / navh4_width); //5 cols
var nav_rows = Math.ceil(nav_items / nav_cols);     //9 rows

alert(nav_cols)
alert(nav_rows)

var currow = 0;

var div = new Array()
for(c=0; c<nav_cols; c++) {
    div[c] =document.createElement("div");
    div[c].className="col";

    for(r=0; r<nav_cols; r++){
        if(nav_h4[c + r*nav_cols]) {
            div[c].innerHTML = div[c].innerHTML + " | " + nav_h4[c + r*nav_cols].innerHTML;
        }
    }
    currow = currow + nav_rows;
}
nav.innerHTML = ""
for(c=0; c<nav_cols; c++) {
    nav.appendChild( div[c] );
}
</script>

</body>
</html>