Question : Displaying SPANS to simulate tb-lr rather than the normal lr-tb way of displaying things.

Hello.

I'm building a generic widget which will display a set of checkboxes and labels in a fluid grid.

The end user will be able to control the size of the container, add any styling to the elements, etc.

The widget accepts a set of id=label pairings and displays them as ... 
1:
2:
3:
4:

<span id="S_{$a_Data['UniqueID']}">
	<input type="checkbox" name="cbGrid[]" value="{$a_Data['UniqueID']}" id="C_{$a_Data['UniqueID']}" />
	<label for="C_{$a_Data['UniqueID']}">{$a_Data['Label']}</label>
</span>


Nothing too complicated.

I've got all the auto sizing done, so no matter what size the labels are (within reason - short labels sub 50 chars), the checkboxes all line up.

In the code snippet attached, I've got a static example. The fully dynamic version is not yet optimized, but fully works in IE8Standards, Firefox and Chrome. It is just a little slow in IE and FF.


What I'd like to do is to reorganize the SPANs so that instead of reading left-to-right, top-to-bottom, they read top-to-bottom, left-to-right.

The 2 main problems I have are:

1 - The number of elements is unknown until runtime

The widget includes an AJAX element to retrieve the list of ids and labels from a database. The list can be any data to which there is a suitable server side responder.

2 - The number of columns is unknown until runtime

The number of columns is determined, at runtime, by the width of the container and the maximum width of the text, taking into account border, margin and padding.


So, I'm really looking for 2 things.

1 - What algorithm can I use to allow me to sort 1-n items into 1-m columns such that the last row contains any left overs and that columns are filled first.

2 - Can I do this in JS by just applying positioning?


OOI, the experimental CSS3 column-count (and associated rules) would seem to offer some hope here. If they worked.

-moz-column-count & -webkit-column-count both seem to be imperfect at the moment. And it excludes anything in IE.



For the example data, the output should look like ...

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

AJDDQVIRXB           GCVCSZUAXVSSFDOXF    LYMWLFUHDCSOGTDIVU   QEDFDVCSRLPM         WMNVUPCDXEM 
AJRWJTWTIPBGUBQ      GFGCXSWYEQJKRE       MBHTO                QJMCOFZBGET          WNJSVVICXUSXL 
AMIXMKEZGM           GITDBCVTAHVVFTLAMZG  MNORWCWC             QXCIVWCGXPKTY        WNSXUJLQUSLLFMF 
APYYSBXVPPWVIRDSQSYI GJAMXBZKSO           MOYM                 QYFJJMXMTCPDQD       WQF 
AQN                  GONTINDHSIEMBS       MWPZ                 RLZOOGHJNVZDEFKHT    WUGBNXILWXOKM 
AVAXA                GYVSKFC              MWTCCMNWCNSZJEZSJ    RQXFJCZGYEWPDRTXZH   WYDDXRWDQPH 
AVGQHKAIAYUGXEWQ     HABDVNDI             MZTBJSURMAPNP        RSMKDDWUOSYAWEHEGC   XEW 
BJKJFJYFETPXVDFMHH   HKZ                  NDPRBCDU             SDFJXJDOXTXTBIBCO    XLUAQ 
BKTYJGMNQXXAAA       HNDHYSZBYZFGT        NEYAGJHGVACZ         SLNUYAL              XQABOUIJPWRZDTZEXI 
BKUIQXHFJ            HOBINLMPWRWIDVBIOGR  NGVIWTZSLVWN         SWOHQPGQNDLLEBAZ     XUGSSAUBZZI 
BMEHSWZISSBZ         HRWETYNHFGXJN        NMZRZXDFDJU          TOE                  XYKAWQEQMYDU 
BVPMKLOFBGLJSIB      IFHNXGDGXXRDTEVIIJ   NOWPKIXJHS           TROXMCROFXKZ         XZOCDZFIVHTGNPAA 
CRQMMXAVSIYWKSLPB    JOVFCFHUQBSRV        PAPDJLVIVGBESBK      TVGIMKBYRW           YGWZCLJQFPI 
CVEXAVCYQWY          JPO                  PBPQHIBFMIBNJY       UANFZTVBBZCB         YJBSJEJX 
EAWAYLHZ             JQSZDG               POAOXFGNZBW          UJKACYFKSBSPIA       YLRJAFKTAQYZRJIJXXQ 
EBIOVEMTA            JYWXVQMLMVTWZIBSE    PQGSIPWFDMHOVY       UOEPPBAZMRXUY        YPGXRXKDVFZYAUZYH 
ENGRPJGWDYCW         KEL                  PREOINTJWV           UZZOTOXRFPXEHFMQ     YRBDXVWHEQUIT 
ENXUDZWUF            LFKXNDOL             PTKKXCUEFGFAB        VETKKOWMZLAP         YRLXQVQCWEKIAYG 
FJJMQKRMSVIHNAQXXW   LLCNKIYRLPSYAOJM     PUQYWOXUUZZMZ        VUNNYXLNZUYLV        YXYYDTZYGURC 
FSKNGNNKQ            LSFXIDXYLHBW         PZQKHHVCBF           VXBICHZ              YZALVXZFKPKFZE 
FVCXPZLXYPE          LXGVRMAP             QCFZRB               WKOTS                ZMDLCZBLCWZKD 
FWG                  LXVTZEBPY            QDKSFUMJQTPK         WLQYOETGJ            ZMFDWTXAJPMFBO
GAEUPSNZQRGWLYIF


Any ideas, known examples of this, etc.

Really. Anything considered.

Regards,

Richard Quadling. 
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:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<title>Test : Static Label Grid</title> 
<style type="text/css">
body,
html
	{
	background-color : rgb( 23,  23,  23);
	border           : 0;
	color            : rgb(255, 255, 255);
	font             : 100% / 1.25 Verdana, "Century Gothic", Calibri, "Lucida Grande", Arial, Helvetica, sans-serif;
	margin           : 0;
	padding          : 0;
	}

body
	{
	margin              : 10px;
	}

#cbGrid
	{
	background-color : rgb(216, 229, 241);
	border           : 3px solid rgb( 55,  96, 145);
	color            : rgb(0, 0, 0);
	float            : right;
	padding          : 0;
	margin           : 5px;
	width            : 85%;
	}

#cbGrid h1
	{
	border-bottom  : 1px solid black;
	border-radius  : 0;
	font-size      : 2em;
	font-weight    : normal;
	letter-spacing : 01px;
	margin         : 0 0 5px;
	padding        : 0;
	text-align     : center;
	text-shadow    : none;
	white-space    : normal;
	}

#cbGrid input[type=checkbox]
	{
	border  : 0;
	margin  : 0 5px;
	padding : 0;
	}

#cbGrid label
	{
	font-size      : 8pt;
	padding-bottom : 0px;
	padding-right  : 5px;
	position       : relative;
	text-shadow    : none;
	top            : -2px;
	}

#cbGrid span
	{
	float        : left;
	margin-left  : 1px;
	margin-right : 1px;
	min-width    : 201px;
	padding      : 0 4.1px;
	white-space  : nowrap;
	}

#cbGrid span:hover
	{
	background-color : rgb(184, 197, 209);
	cursor           : pointer;
	}
</style>
</head> 
<body> 
<div> 
	<h1>Test : Static Label Grid</h1> 
	<p> 
		I am trying to create a pseudo grid such that the checkboxes all line up based upon the widths of the labels.<br /> 
		These need to be dynamic as the new labels are added every other month or so.
	</p> 
</div> 
<div id="cbGrid"> 
	<h1>Select labels</h1> 
	<span id="S_37"><input type="checkbox" name="cbGrid[]" value="37" id="C_37" /><label id="L_37" for="C_37">AJDDQVIRXB</label></span> 
	<span id="S_725"><input type="checkbox" name="cbGrid[]" value="725" id="C_725" /><label id="L_725" for="C_725">AJRWJTWTIPBGUBQ</label></span> 
	<span id="S_48"><input type="checkbox" name="cbGrid[]" value="48" id="C_48" /><label id="L_48" for="C_48">AMIXMKEZGM</label></span> 
	<span id="S_759"><input type="checkbox" name="cbGrid[]" value="759" id="C_759" /><label id="L_759" for="C_759">APYYSBXVPPWVIRDSQSYI</label></span> 
	<span id="S_771"><input type="checkbox" name="cbGrid[]" value="771" id="C_771" /><label id="L_771" for="C_771">AQN</label></span> 
	<span id="S_90"><input type="checkbox" name="cbGrid[]" value="90" id="C_90" /><label id="L_90" for="C_90">AVAXA</label></span> 
	<span id="S_75"><input type="checkbox" name="cbGrid[]" value="75" id="C_75" /><label id="L_75" for="C_75">AVGQHKAIAYUGXEWQ</label></span> 
	<span id="S_737"><input type="checkbox" name="cbGrid[]" value="737" id="C_737" /><label id="L_737" for="C_737">BJKJFJYFETPXVDFMHH</label></span> 
	<span id="S_765"><input type="checkbox" name="cbGrid[]" value="765" id="C_765" /><label id="L_765" for="C_765">BKTYJGMNQXXAAA</label></span> 
	<span id="S_79"><input type="checkbox" name="cbGrid[]" value="79" id="C_79" /><label id="L_79" for="C_79">BKUIQXHFJ</label></span> 
	<span id="S_13"><input type="checkbox" name="cbGrid[]" value="13" id="C_13" /><label id="L_13" for="C_13">BMEHSWZISSBZ</label></span> 
	<span id="S_30"><input type="checkbox" name="cbGrid[]" value="30" id="C_30" /><label id="L_30" for="C_30">BVPMKLOFBGLJSIB</label></span> 
	<span id="S_745"><input type="checkbox" name="cbGrid[]" value="745" id="C_745" /><label id="L_745" for="C_745">CRQMMXAVSIYWKSLPB</label></span> 
	<span id="S_752"><input type="checkbox" name="cbGrid[]" value="752" id="C_752" /><label id="L_752" for="C_752">CVEXAVCYQWY</label></span> 
	<span id="S_726"><input type="checkbox" name="cbGrid[]" value="726" id="C_726" /><label id="L_726" for="C_726">EAWAYLHZ</label></span> 
	<span id="S_758"><input type="checkbox" name="cbGrid[]" value="758" id="C_758" /><label id="L_758" for="C_758">EBIOVEMTA</label></span> 
	<span id="S_756"><input type="checkbox" name="cbGrid[]" value="756" id="C_756" /><label id="L_756" for="C_756">ENGRPJGWDYCW</label></span> 
	<span id="S_63"><input type="checkbox" name="cbGrid[]" value="63" id="C_63" /><label id="L_63" for="C_63">ENXUDZWUF</label></span> 
	<span id="S_62"><input type="checkbox" name="cbGrid[]" value="62" id="C_62" /><label id="L_62" for="C_62">FJJMQKRMSVIHNAQXXW</label></span> 
	<span id="S_1"><input type="checkbox" name="cbGrid[]" value="1" id="C_1" /><label id="L_1" for="C_1">FSKNGNNKQ</label></span> 
	<span id="S_82"><input type="checkbox" name="cbGrid[]" value="82" id="C_82" /><label id="L_82" for="C_82">FVCXPZLXYPE</label></span> 
	<span id="S_772"><input type="checkbox" name="cbGrid[]" value="772" id="C_772" /><label id="L_772" for="C_772">FWG</label></span> 
	<span id="S_738"><input type="checkbox" name="cbGrid[]" value="738" id="C_738" /><label id="L_738" for="C_738">GAEUPSNZQRGWLYIF</label></span> 
	<span id="S_67"><input type="checkbox" name="cbGrid[]" value="67" id="C_67" /><label id="L_67" for="C_67">GCVCSZUAXVSSFDOXF</label></span> 
	<span id="S_60"><input type="checkbox" name="cbGrid[]" value="60" id="C_60" /><label id="L_60" for="C_60">GFGCXSWYEQJKRE</label></span> 
	<span id="S_71"><input type="checkbox" name="cbGrid[]" value="71" id="C_71" /><label id="L_71" for="C_71">GITDBCVTAHVVFTLAMZG</label></span> 
	<span id="S_18"><input type="checkbox" name="cbGrid[]" value="18" id="C_18" /><label id="L_18" for="C_18">GJAMXBZKSO</label></span> 
	<span id="S_88"><input type="checkbox" name="cbGrid[]" value="88" id="C_88" /><label id="L_88" for="C_88">GONTINDHSIEMBS</label></span> 
	<span id="S_77"><input type="checkbox" name="cbGrid[]" value="77" id="C_77" /><label id="L_77" for="C_77">GYVSKFC</label></span> 
	<span id="S_76"><input type="checkbox" name="cbGrid[]" value="76" id="C_76" /><label id="L_76" for="C_76">HABDVNDI</label></span> 
	<span id="S_730"><input type="checkbox" name="cbGrid[]" value="730" id="C_730" /><label id="L_730" for="C_730">HKZ</label></span> 
	<span id="S_747"><input type="checkbox" name="cbGrid[]" value="747" id="C_747" /><label id="L_747" for="C_747">HNDHYSZBYZFGT</label></span> 
	<span id="S_68"><input type="checkbox" name="cbGrid[]" value="68" id="C_68" /><label id="L_68" for="C_68">HOBINLMPWRWIDVBIOGR</label></span> 
	<span id="S_41"><input type="checkbox" name="cbGrid[]" value="41" id="C_41" /><label id="L_41" for="C_41">HRWETYNHFGXJN</label></span> 
	<span id="S_44"><input type="checkbox" name="cbGrid[]" value="44" id="C_44" /><label id="L_44" for="C_44">IFHNXGDGXXRDTEVIIJ</label></span> 
	<span id="S_81"><input type="checkbox" name="cbGrid[]" value="81" id="C_81" /><label id="L_81" for="C_81">JOVFCFHUQBSRV</label></span> 
	<span id="S_43"><input type="checkbox" name="cbGrid[]" value="43" id="C_43" /><label id="L_43" for="C_43">JPO</label></span> 
	<span id="S_39"><input type="checkbox" name="cbGrid[]" value="39" id="C_39" /><label id="L_39" for="C_39">JQSZDG</label></span> 
	<span id="S_56"><input type="checkbox" name="cbGrid[]" value="56" id="C_56" /><label id="L_56" for="C_56">JYWXVQMLMVTWZIBSE</label></span> 
	<span id="S_74"><input type="checkbox" name="cbGrid[]" value="74" id="C_74" /><label id="L_74" for="C_74">KEL</label></span> 
	<span id="S_721"><input type="checkbox" name="cbGrid[]" value="721" id="C_721" /><label id="L_721" for="C_721">LFKXNDOL</label></span> 
	<span id="S_28"><input type="checkbox" name="cbGrid[]" value="28" id="C_28" /><label id="L_28" for="C_28">LLCNKIYRLPSYAOJM</label></span> 
	<span id="S_72"><input type="checkbox" name="cbGrid[]" value="72" id="C_72" /><label id="L_72" for="C_72">LSFXIDXYLHBW</label></span> 
	<span id="S_12"><input type="checkbox" name="cbGrid[]" value="12" id="C_12" /><label id="L_12" for="C_12">LXGVRMAP</label></span> 
	<span id="S_23"><input type="checkbox" name="cbGrid[]" value="23" id="C_23" /><label id="L_23" for="C_23">LXVTZEBPY</label></span> 
	<span id="S_742"><input type="checkbox" name="cbGrid[]" value="742" id="C_742" /><label id="L_742" for="C_742">LYMWLFUHDCSOGTDIVU</label></span> 
	<span id="S_739"><input type="checkbox" name="cbGrid[]" value="739" id="C_739" /><label id="L_739" for="C_739">MBHTO</label></span> 
	<span id="S_58"><input type="checkbox" name="cbGrid[]" value="58" id="C_58" /><label id="L_58" for="C_58">MNORWCWC</label></span> 
	<span id="S_766"><input type="checkbox" name="cbGrid[]" value="766" id="C_766" /><label id="L_766" for="C_766">MOYM</label></span> 
	<span id="S_15"><input type="checkbox" name="cbGrid[]" value="15" id="C_15" /><label id="L_15" for="C_15">MWPZ</label></span> 
	<span id="S_769"><input type="checkbox" name="cbGrid[]" value="769" id="C_769" /><label id="L_769" for="C_769">MWTCCMNWCNSZJEZSJ</label></span> 
	<span id="S_760"><input type="checkbox" name="cbGrid[]" value="760" id="C_760" /><label id="L_760" for="C_760">MZTBJSURMAPNP</label></span> 
	<span id="S_748"><input type="checkbox" name="cbGrid[]" value="748" id="C_748" /><label id="L_748" for="C_748">NDPRBCDU</label></span> 
	<span id="S_26"><input type="checkbox" name="cbGrid[]" value="26" id="C_26" /><label id="L_26" for="C_26">NEYAGJHGVACZ</label></span> 
	<span id="S_749"><input type="checkbox" name="cbGrid[]" value="749" id="C_749" /><label id="L_749" for="C_749">NGVIWTZSLVWN</label></span> 
	<span id="S_712"><input type="checkbox" name="cbGrid[]" value="712" id="C_712" /><label id="L_712" for="C_712">NMZRZXDFDJU</label></span> 
	<span id="S_753"><input type="checkbox" name="cbGrid[]" value="753" id="C_753" /><label id="L_753" for="C_753">NOWPKIXJHS</label></span> 
	<span id="S_69"><input type="checkbox" name="cbGrid[]" value="69" id="C_69" /><label id="L_69" for="C_69">PAPDJLVIVGBESBK</label></span> 
	<span id="S_85"><input type="checkbox" name="cbGrid[]" value="85" id="C_85" /><label id="L_85" for="C_85">PBPQHIBFMIBNJY</label></span> 
	<span id="S_761"><input type="checkbox" name="cbGrid[]" value="761" id="C_761" /><label id="L_761" for="C_761">POAOXFGNZBW</label></span> 
	<span id="S_750"><input type="checkbox" name="cbGrid[]" value="750" id="C_750" /><label id="L_750" for="C_750">PQGSIPWFDMHOVY</label></span> 
	<span id="S_770"><input type="checkbox" name="cbGrid[]" value="770" id="C_770" /><label id="L_770" for="C_770">PREOINTJWV</label></span> 
	<span id="S_736"><input type="checkbox" name="cbGrid[]" value="736" id="C_736" /><label id="L_736" for="C_736">PTKKXCUEFGFAB</label></span> 
	<span id="S_720"><input type="checkbox" name="cbGrid[]" value="720" id="C_720" /><label id="L_720" for="C_720">PUQYWOXUUZZMZ</label></span> 
	<span id="S_767"><input type="checkbox" name="cbGrid[]" value="767" id="C_767" /><label id="L_767" for="C_767">PZQKHHVCBF</label></span> 
	<span id="S_38"><input type="checkbox" name="cbGrid[]" value="38" id="C_38" /><label id="L_38" for="C_38">QCFZRB</label></span> 
	<span id="S_55"><input type="checkbox" name="cbGrid[]" value="55" id="C_55" /><label id="L_55" for="C_55">QDKSFUMJQTPK</label></span> 
	<span id="S_33"><input type="checkbox" name="cbGrid[]" value="33" id="C_33" /><label id="L_33" for="C_33">QEDFDVCSRLPM</label></span> 
	<span id="S_42"><input type="checkbox" name="cbGrid[]" value="42" id="C_42" /><label id="L_42" for="C_42">QJMCOFZBGET</label></span> 
	<span id="S_66"><input type="checkbox" name="cbGrid[]" value="66" id="C_66" /><label id="L_66" for="C_66">QXCIVWCGXPKTY</label></span> 
	<span id="S_86"><input type="checkbox" name="cbGrid[]" value="86" id="C_86" /><label id="L_86" for="C_86">QYFJJMXMTCPDQD</label></span> 
	<span id="S_762"><input type="checkbox" name="cbGrid[]" value="762" id="C_762" /><label id="L_762" for="C_762">RLZOOGHJNVZDEFKHT</label></span> 
	<span id="S_751"><input type="checkbox" name="cbGrid[]" value="751" id="C_751" /><label id="L_751" for="C_751">RQXFJCZGYEWPDRTXZH</label></span> 
	<span id="S_24"><input type="checkbox" name="cbGrid[]" value="24" id="C_24" /><label id="L_24" for="C_24">RSMKDDWUOSYAWEHEGC</label></span> 
	<span id="S_723"><input type="checkbox" name="cbGrid[]" value="723" id="C_723" /><label id="L_723" for="C_723">SDFJXJDOXTXTBIBCO</label></span> 
	<span id="S_734"><input type="checkbox" name="cbGrid[]" value="734" id="C_734" /><label id="L_734" for="C_734">SLNUYAL</label></span> 
	<span id="S_729"><input type="checkbox" name="cbGrid[]" value="729" id="C_729" /><label id="L_729" for="C_729">SWOHQPGQNDLLEBAZ</label></span> 
	<span id="S_78"><input type="checkbox" name="cbGrid[]" value="78" id="C_78" /><label id="L_78" for="C_78">TOE</label></span> 
	<span id="S_34"><input type="checkbox" name="cbGrid[]" value="34" id="C_34" /><label id="L_34" for="C_34">TROXMCROFXKZ</label></span> 
	<span id="S_727"><input type="checkbox" name="cbGrid[]" value="727" id="C_727" /><label id="L_727" for="C_727">TVGIMKBYRW</label></span> 
	<span id="S_73"><input type="checkbox" name="cbGrid[]" value="73" id="C_73" /><label id="L_73" for="C_73">UANFZTVBBZCB</label></span> 
	<span id="S_65"><input type="checkbox" name="cbGrid[]" value="65" id="C_65" /><label id="L_65" for="C_65">UJKACYFKSBSPIA</label></span> 
	<span id="S_735"><input type="checkbox" name="cbGrid[]" value="735" id="C_735" /><label id="L_735" for="C_735">UOEPPBAZMRXUY</label></span> 
	<span id="S_70"><input type="checkbox" name="cbGrid[]" value="70" id="C_70" /><label id="L_70" for="C_70">UZZOTOXRFPXEHFMQ</label></span> 
	<span id="S_11"><input type="checkbox" name="cbGrid[]" value="11" id="C_11" /><label id="L_11" for="C_11">VETKKOWMZLAP</label></span> 
	<span id="S_614"><input type="checkbox" name="cbGrid[]" value="614" id="C_614" /><label id="L_614" for="C_614">VUNNYXLNZUYLV</label></span> 
	<span id="S_29"><input type="checkbox" name="cbGrid[]" value="29" id="C_29" /><label id="L_29" for="C_29">VXBICHZ</label></span> 
	<span id="S_20"><input type="checkbox" name="cbGrid[]" value="20" id="C_20" /><label id="L_20" for="C_20">WKOTS</label></span> 
	<span id="S_35"><input type="checkbox" name="cbGrid[]" value="35" id="C_35" /><label id="L_35" for="C_35">WLQYOETGJ</label></span> 
	<span id="S_755"><input type="checkbox" name="cbGrid[]" value="755" id="C_755" /><label id="L_755" for="C_755">WMNVUPCDXEM</label></span> 
	<span id="S_54"><input type="checkbox" name="cbGrid[]" value="54" id="C_54" /><label id="L_54" for="C_54">WNJSVVICXUSXL</label></span> 
	<span id="S_84"><input type="checkbox" name="cbGrid[]" value="84" id="C_84" /><label id="L_84" for="C_84">WNSXUJLQUSLLFMF</label></span> 
	<span id="S_724"><input type="checkbox" name="cbGrid[]" value="724" id="C_724" /><label id="L_724" for="C_724">WQF</label></span> 
	<span id="S_757"><input type="checkbox" name="cbGrid[]" value="757" id="C_757" /><label id="L_757" for="C_757">WUGBNXILWXOKM</label></span> 
	<span id="S_19"><input type="checkbox" name="cbGrid[]" value="19" id="C_19" /><label id="L_19" for="C_19">WYDDXRWDQPH</label></span> 
	<span id="S_80"><input type="checkbox" name="cbGrid[]" value="80" id="C_80" /><label id="L_80" for="C_80">XEW</label></span> 
	<span id="S_14"><input type="checkbox" name="cbGrid[]" value="14" id="C_14" /><label id="L_14" for="C_14">XLUAQ</label></span> 
	<span id="S_746"><input type="checkbox" name="cbGrid[]" value="746" id="C_746" /><label id="L_746" for="C_746">XQABOUIJPWRZDTZEXI</label></span> 
	<span id="S_718"><input type="checkbox" name="cbGrid[]" value="718" id="C_718" /><label id="L_718" for="C_718">XUGSSAUBZZI</label></span> 
	<span id="S_713"><input type="checkbox" name="cbGrid[]" value="713" id="C_713" /><label id="L_713" for="C_713">XYKAWQEQMYDU</label></span> 
	<span id="S_17"><input type="checkbox" name="cbGrid[]" value="17" id="C_17" /><label id="L_17" for="C_17">XZOCDZFIVHTGNPAA</label></span> 
	<span id="S_45"><input type="checkbox" name="cbGrid[]" value="45" id="C_45" /><label id="L_45" for="C_45">YGWZCLJQFPI</label></span> 
	<span id="S_719"><input type="checkbox" name="cbGrid[]" value="719" id="C_719" /><label id="L_719" for="C_719">YJBSJEJX</label></span> 
	<span id="S_92"><input type="checkbox" name="cbGrid[]" value="92" id="C_92" /><label id="L_92" for="C_92">YLRJAFKTAQYZRJIJXXQ</label></span> 
	<span id="S_659"><input type="checkbox" name="cbGrid[]" value="659" id="C_659" /><label id="L_659" for="C_659">YPGXRXKDVFZYAUZYH</label></span> 
	<span id="S_768"><input type="checkbox" name="cbGrid[]" value="768" id="C_768" /><label id="L_768" for="C_768">YRBDXVWHEQUIT</label></span> 
	<span id="S_40"><input type="checkbox" name="cbGrid[]" value="40" id="C_40" /><label id="L_40" for="C_40">YRLXQVQCWEKIAYG</label></span> 
	<span id="S_64"><input type="checkbox" name="cbGrid[]" value="64" id="C_64" /><label id="L_64" for="C_64">YXYYDTZYGURC</label></span> 
	<span id="S_754"><input type="checkbox" name="cbGrid[]" value="754" id="C_754" /><label id="L_754" for="C_754">YZALVXZFKPKFZE</label></span> 
	<span id="S_59"><input type="checkbox" name="cbGrid[]" value="59" id="C_59" /><label id="L_59" for="C_59">ZMDLCZBLCWZKD</label></span> 
	<span id="S_714"><input type="checkbox" name="cbGrid[]" value="714" id="C_714" /><label id="L_714" for="C_714">ZMFDWTXAJPMFBO</label></span></div> 
</body> 
</html>

Answer : Displaying SPANS to simulate tb-lr rather than the normal lr-tb way of displaying things.

The following (inelegant) code is untested, but it should get you started.

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:

Given the number of words and columns:

var word_count = 111;
var cols = 5;
var extra = 0;
var spillage = [0,0,0,0,0]; // Same # of elements as # of columns
var rows = parseInt(word_count / cols, 10); // Words per column
var i = 0;

if (rows * cols) !== word_count) { 
    extra = word_count - (rows  * cols); // Leftovers ?
    if (extra !== 0) {
        rows += 1; // Need another row for leftovers
    }
}

/*
You know the # of entries per column and you can split the "word_list" on spaces 
(or tab or whatever) and loop through the words, building your <SPAN/> elements
*/

var words = wordlist.split(' '); // Create array of words
var span = [];

for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
        // Create <SPAN/>
        span[(i  + (j * cols)] = "<span>" + (i + (j * cols);
    }
}

/*
"span" now holds the <SPAN/> elements in columnar order:
[
   0, 24, 46, 68, 90,
   1, 25, 47, 69, 91,
   2, 26, 48, 70, 92,
...
  22, 45, 67, 89,111
  23  --  --  --  --
]

and you can add them to the DOM with a simple loop
*/

for (i = 0; i < span.length; i += 1) {
    document.write(span[i]);
}
Random Solutions  
 
programming4us programming4us