DaveDev DaveDev - 4 months ago 28
CSS Question

How to produce a 3-column list?

I have to produce a 3-column list of items similar to what can be seen for the different groups (mostly banks and financial institutions) at this page:

http://funds.ft.com/FundDirectory.aspx (even though these are horizontally aligned divs)

I have all the items I need to add to the 3 columns in a

stored in my

I was thinking of taking an approach similar to:

<% foreach (var item in Model.Groups) { %>

<a href='<%=item.URL %>'>
<%= Html.Encode(item.Name) %>

<% } %>

but this will only generate a single-column list. Is there any way for me to produce a 3-column list with simple HTML/CSS or do I have to take a more dynamic approach, by e.g. creating 3 horizontally aligned lists, with the number of items per list depending on the total number of items in
/ 3?

Or is there a smarter way for me to approach this? I'm open to all suggestions. Thanks


This is the simplest and most effective answer I've found:


To quote the site:


The CSS:
ul {
  float: left;
  width: 12em;
  margin: 0;
  padding: 0;
  list-style: none;

li {
  float: left;
  width: 6em;
  margin: 0;
  padding: 0;

"If we want more columns we can widen the list and and add more list items"