Multiple Column Layout

Problem

I'm experimenting with a multiple column layout. I want to create a table of contents and have stumbled across the CSS column-count-property. This property specifies, in how many columns the content (in my case in alphabetical order) will be displayed (in my case a div). [Could I also use a table for my problem?]

I would like the table of contents to have multiple columns but just as much, that they do not overlap (of course with a certain padding). How can I achieve hat? If I hard-code a column-count (e.g. 7), I cannot be sure that the content does not overlap. If I do not specify anything, the column-count property is set to auto and will display everything in only one column.

And I do not know if I can use a table, since data we are specifying the contents of a table row after row not column after column (the scaling problem i.e. how many columns would still remain).

[edit]I am using XSLT to populate the table of contents i.e. it is 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 this case I of course exaggerated the amount of columns, but my values I want to display still overlap, because my strings are longer. If I do not set the property at all, everything is displayed in one column. My question is: Can I make the system scale automatically? So can the system decide how many columns it will use (the maximum amount) so that the content does not overlap.

Problem courtesy of: slashburn

Solution

Use the column-width property instead. Using column-count forces a specific number of columns, while column-width basically says make as many columns this wide as will fit into the available space.

http://cssdeck.com/labs/ycqqx5f3

.foo {
  -moz-columns: 8em;
  -webkit-columns: 8em;
  columns: 8em; /* columns is shorthand for column-width column-count */
}
Solution courtesy of: cimmanon

Discussion

This is how I would do it:

p{
    height:20px;
    width:50px;
    display:inline-block;
    margin-left:15px; /* fallback older browsers */
    margin-right:15px; /* fallback older browsers */
    margin-left:calc(100% - ((100% / 240) * 230));
    margin-right:calc(100% - ((100% / 240) * 230));
    margin-top:15px;
    margin-bottom:15px;
    overflow:hidden;
    position:relative;
}
div{
    text-align:center;
}

The parent div is to center-align everything. The calc() is to create a dynamical margin (I just took this from my own script so this might need some change), so that it looks like they move away/towards each other. Of course this does require fixed height and width of the <p>.

Here's an example: http://jsfiddle.net/DUNkB/

Hope it's what you are looking for.

Discussion courtesy of: jdepypere

This recipe can be found in it's original form on Stack Over Flow.