html - Multiple Column Layout -

i'm experimenting multiple column layout. want create table of contents , have stumbled across css column-count-property. property specifies, in how many columns content (in case in alphabetical order) displayed (in case div). [could use table problem?]

i table of contents have multiple columns much, not overlap (of course padding). how can achieve hat? if hard-code column-count (e.g. 7), cannot sure content not overlap. if not specify anything, column-count property set auto , display in 1 column.

and not know if can use table, since data specifying contents of table row after row not column after column (the scaling problem i.e. how many columns still remain).

[edit]i using xslt populate table of contents i.e. not static content.[/edit]

   <div style="-moz-column-count: 50; -webkit-column-count: 50; column-count: 50;">     <p><a href="#topic0">topic0</a></p> <p><a href="#topic1">topic1</a></p> <p><a href="#topic2">topic2</a></p> <p><a href="#topic3">topic3</a></p> <p><a href="#topic4">topic4</a></p> <p><a href="#topic5">topic5</a></p> <p><a href="#topic6">topic6</a></p> <p><a href="#topic7">topic7</a></p> <p><a href="#topic8">topic8</a></p> <p><a href="#topic9">topic9</a></p> <p><a href="#topic10">topic10</a></p> <p><a href="#topic11">topic11</a></p> <p><a href="#topic12">topic12</a></p> <p><a href="#topic13">topic13</a></p> <p><a href="#topic14">topic14</a></p> <p><a href="#topic15">topic15</a></p> <p><a href="#topic16">topic16</a></p> <p><a href="#topic17">topic17</a></p> <p><a href="#topic18">topic18</a></p> <p><a href="#topic19">topic19</a></p> <p><a href="#topic20">topic20</a></p> <p><a href="#topic21">topic21</a></p> <p><a href="#topic22">topic22</a></p> <p><a href="#topic23">topic23</a></p> <p><a href="#topic24">topic24</a></p> <p><a href="#topic25">topic25</a></p> <p><a href="#topic26">topic26</a></p> <p><a href="#topic27">topic27</a></p> <p><a href="#topic28">topic28</a></p> <p><a href="#topic29">topic29</a></p> <p><a href="#topic30">topic30</a></p> <p><a href="#topic31">topic31</a></p> <p><a href="#topic32">topic32</a></p> <p><a href="#topic33">topic33</a></p> <p><a href="#topic34">topic34</a></p> <p><a href="#topic35">topic35</a></p> <p><a href="#topic36">topic36</a></p> <p><a href="#topic37">topic37</a></p> <p><a href="#topic38">topic38</a></p> <p><a href="#topic39">topic39</a></p> <p><a href="#topic40">topic40</a></p> <p><a href="#topic41">topic41</a></p> <p><a href="#topic42">topic42</a></p> <p><a href="#topic43">topic43</a></p> <p><a href="#topic44">topic44</a></p> <p><a href="#topic45">topic45</a></p> <p><a href="#topic46">topic46</a></p> <p><a href="#topic47">topic47</a></p> <p><a href="#topic48">topic48</a></p> <p><a href="#topic49">topic49</a></p> <p><a href="#topic50">topic50</a></p> <p><a href="#topic51">topic51</a></p> <p><a href="#topic52">topic52</a></p> <p><a href="#topic53">topic53</a></p> <p><a href="#topic54">topic54</a></p> <p><a href="#topic55">topic55</a></p> <p><a href="#topic56">topic56</a></p> <p><a href="#topic57">topic57</a></p> <p><a href="#topic58">topic58</a></p> <p><a href="#topic59">topic59</a></p> <p><a href="#topic60">topic60</a></p> <p><a href="#topic61">topic61</a></p> <p><a href="#topic62">topic62</a></p> <p><a href="#topic63">topic63</a></p> <p><a href="#topic64">topic64</a></p> <p><a href="#topic65">topic65</a></p> <p><a href="#topic66">topic66</a></p> <p><a href="#topic67">topic67</a></p> <p><a href="#topic68">topic68</a></p> <p><a href="#topic69">topic69</a></p> <p><a href="#topic70">topic70</a></p> <p><a href="#topic71">topic71</a></p> <p><a href="#topic72">topic72</a></p> <p><a href="#topic73">topic73</a></p> <p><a href="#topic74">topic74</a></p> <p><a href="#topic75">topic75</a></p> <p><a href="#topic76">topic76</a></p> <p><a href="#topic77">topic77</a></p> <p><a href="#topic78">topic78</a></p> <p><a href="#topic79">topic79</a></p> <p><a href="#topic80">topic80</a></p> <p><a href="#topic81">topic81</a></p> <p><a href="#topic82">topic82</a></p> <p><a href="#topic83">topic83</a></p> <p><a href="#topic84">topic84</a></p> <p><a href="#topic85">topic85</a></p> <p><a href="#topic86">topic86</a></p> <p><a href="#topic87">topic87</a></p> <p><a href="#topic88">topic88</a></p> <p><a href="#topic89">topic89</a></p> <p><a href="#topic90">topic90</a></p> <p><a href="#topic91">topic91</a></p> <p><a href="#topic92">topic92</a></p> <p><a href="#topic93">topic93</a></p> <p><a href="#topic94">topic94</a></p> <p><a href="#topic95">topic95</a></p> <p><a href="#topic96">topic96</a></p> <p><a href="#topic97">topic97</a></p> <p><a href="#topic98">topic98</a></p> <p><a href="#topic99">topic99</a></p> <p><a href="#topic100">topic100</a></p> <p><a href="#topic101">topic101</a></p> <p><a href="#topic102">topic102</a></p> <p><a href="#topic103">topic103</a></p> <p><a href="#topic104">topic104</a></p> <p><a href="#topic105">topic105</a></p> <p><a href="#topic106">topic106</a></p> <p><a href="#topic107">topic107</a></p> <p><a href="#topic108">topic108</a></p> <p><a href="#topic109">topic109</a></p> <p><a href="#topic110">topic110</a></p> <p><a href="#topic111">topic111</a></p> <p><a href="#topic112">topic112</a></p> <p><a href="#topic113">topic113</a></p> <p><a href="#topic114">topic114</a></p> <p><a href="#topic115">topic115</a></p> <p><a href="#topic116">topic116</a></p> <p><a href="#topic117">topic117</a></p> <p><a href="#topic118">topic118</a></p> <p><a href="#topic119">topic119</a></p> <p><a href="#topic120">topic120</a></p> <p><a href="#topic121">topic121</a></p> <p><a href="#topic122">topic122</a></p> <p><a href="#topic123">topic123</a></p> <p><a href="#topic124">topic124</a></p> <p><a href="#topic125">topic125</a></p> <p><a href="#topic126">topic126</a></p> <p><a href="#topic127">topic127</a></p> <p><a href="#topic128">topic128</a></p> <p><a href="#topic129">topic129</a></p> <p><a href="#topic130">topic130</a></p> <p><a href="#topic131">topic131</a></p> <p><a href="#topic132">topic132</a></p> <p><a href="#topic133">topic133</a></p> <p><a href="#topic134">topic134</a></p> <p><a href="#topic135">topic135</a></p> <p><a href="#topic136">topic136</a></p> <p><a href="#topic137">topic137</a></p> <p><a href="#topic138">topic138</a></p> <p><a href="#topic139">topic139</a></p> <p><a href="#topic140">topic140</a></p> <p><a href="#topic141">topic141</a></p> <p><a href="#topic142">topic142</a></p> <p><a href="#topic143">topic143</a></p> <p><a href="#topic144">topic144</a></p> <p><a href="#topic145">topic145</a></p> <p><a href="#topic146">topic146</a></p> <p><a href="#topic147">topic147</a></p> <p><a href="#topic148">topic148</a></p> <p><a href="#topic149">topic149</a></p> <p><a href="#topic150">topic150</a></p> <p><a href="#topic151">topic151</a></p> <p><a href="#topic152">topic152</a></p> <p><a href="#topic153">topic153</a></p> <p><a href="#topic154">topic154</a></p> <p><a href="#topic155">topic155</a></p> <p><a href="#topic156">topic156</a></p> <p><a href="#topic157">topic157</a></p> <p><a href="#topic158">topic158</a></p> <p><a href="#topic159">topic159</a></p> <p><a href="#topic160">topic160</a></p> <p><a href="#topic161">topic161</a></p> <p><a href="#topic162">topic162</a></p> <p><a href="#topic163">topic163</a></p> <p><a href="#topic164">topic164</a></p> <p><a href="#topic165">topic165</a></p> <p><a href="#topic166">topic166</a></p> <p><a href="#topic167">topic167</a></p> <p><a href="#topic168">topic168</a></p> <p><a href="#topic169">topic169</a></p> <p><a href="#topic170">topic170</a></p> <p><a href="#topic171">topic171</a></p> <p><a href="#topic172">topic172</a></p> <p><a href="#topic173">topic173</a></p> <p><a href="#topic174">topic174</a></p> <p><a href="#topic175">topic175</a></p> <p><a href="#topic176">topic176</a></p> <p><a href="#topic177">topic177</a></p> <p><a href="#topic178">topic178</a></p> <p><a href="#topic179">topic179</a></p> <p><a href="#topic180">topic180</a></p> <p><a href="#topic181">topic181</a></p> <p><a href="#topic182">topic182</a></p> <p><a href="#topic183">topic183</a></p> <p><a href="#topic184">topic184</a></p> <p><a href="#topic185">topic185</a></p> <p><a href="#topic186">topic186</a></p> <p><a href="#topic187">topic187</a></p> <p><a href="#topic188">topic188</a></p> <p><a href="#topic189">topic189</a></p> <p><a href="#topic190">topic190</a></p> <p><a href="#topic191">topic191</a></p> <p><a href="#topic192">topic192</a></p> <p><a href="#topic193">topic193</a></p> <p><a href="#topic194">topic194</a></p> <p><a href="#topic195">topic195</a></p> <p><a href="#topic196">topic196</a></p> <p><a href="#topic197">topic197</a></p> <p><a href="#topic198">topic198</a></p> <p><a href="#topic199">topic199</a></p> </div> 

in case of course exaggerated amount of columns, values want display still overlap, because strings longer. if not set property @ all, displayed in 1 column. question is: can make system scale automatically? can system decide how many columns use (the maximum amount) content not overlap.

use column-width property instead. using column-count forces specific number of columns, while column-width says make many columns wide fit available space.

http://cssdeck.com/labs/ycqqx5f3

.foo {   -moz-columns: 8em;   -webkit-columns: 8em;   columns: 8em; /* columns shorthand column-width column-count */ }