CODEWITHSUNDEEP
htmlcssasp.net-mvc
DaveDev
DaveDev

Reputation: 42185

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 List<Group> stored in my Model.Groups object.

I was thinking of taking an approach similar to:

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

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

    <% } %>
</ul>

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 Model.Groups / 3?

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

Upvotes: 4

Views: 14215

Answers (4)

roryf
roryf

Reputation: 30160

CSS3 column styles can be used on a list as well:

<ul class="group-list">
    ...
</ul>

.group-list {
    -moz-column-gap: 20;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    -webkit-column-gap: 20;
    column-count: 3;
    column-gap: 20;
}

You can add Modernizr and this jQuery column plugin to support old versions of IE:

if (!Modernizr.csscolumns) {
        $('.group-list').makeacolumnlists({cols: 3, colWidth: 240, equalHeight: false, startN: 1});
}

PPK has a good article on CSS3 column support in browsers, and caniuse.com has a page on CSS3 Multiple column layout too.

Upvotes: 7

DaveDev
DaveDev

Reputation: 42185

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

http://www.communitymx.com/content/article.cfm?cid=27f87

To quote the site:

The HTML:
<ul>
  <li>Antelope</li>
  <li>Bison</li>
  <li>Camel</li>
  <li>Deer</li>
  <li>Eland</li>
  <li>Gazelle</li>
</ul>

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"

Upvotes: 5

jeroen
jeroen

Reputation: 91744

If it´s an unordered list, you can just float the li's left and give them a width of 33%.

Upvotes: 0

J. K.
J. K.

Reputation: 8368

This was answered about an hour ago here: How do I overflow the contents of a column into the next column using CSS?

Upvotes: 0

Related Questions