Menu
I have about a hundred short-text data items (this number can vary substantially) that I would like to put in a page and have the browser manage that into three columns within a surrounding div, arranged with the items going down and then across, like this:
A F L
B G M
C H N
D I O
E K ...
Is there a way to render this out as li's (or maybe just individual lines), and have the browser automatically collate it into three equal-height columns, possibly using CSS?
Are there any browser compatibility issues?
575
Without browser compatibility issues:
<% var rows = source.Count() % 3 == 0 ? source.Count / 3 : (source.Count / 3) + 1; %>
<table>
<% for(int i=0; i<rows; i++) { %>
<tr>
<td><%= source.Skip(i).FirstOrDefault() %></td>
<td><%= source.Skip(i+rows).FirstOrDefault() %></td>
<td><%= source.Skip(i+rows*2).FirstOrDefault() %></td>
</tr>
<% } %>
</table>
We use the modulus operator to let us know if the division is even or not... if it is not, we're not going to add an extra row for the leftover columns. For more information, see http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx
For example look at https://stackoverflow.com/users HTML source - it uses <table>
148
In the CSS world this is the only way I know to do three columns outside of a table of course.
<html>
<div style="width:100px">
<div style="float:left; width:33%;">a</div>
<div style="float:left; width:33%;">bsdf</div>
<div style="float:left; width:33%;">c</div>
<div style="float:left; width:33%;">d</div>
<div style="float:left; width:33%;">e</div>
<div style="float:left; width:33%;">f</div>
<div style="float:left; width:33%;">g</div>
</div>
</html>
Clearly you wouldn't use all those style tags, instead you'd use an actual style. Notice the 33% as the width.
I tried this in IE and FirFox and no probs on either.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
