Question

I have a database query that returns an IList with 12 results in it. Each result is a link and I would like to format my results so that I get 4 lists of 3 results side by side, kind of like this:

item1       item4       item7       item10
item2       item5       item8       item11
item3       item6       item9       item12

Also, I cannot just hard code it into an because the query results could range from 4 to 16. All I know is I want 4 columns and I want to co in ascending order filling in the first column, then the second, then the third, and finally the fourth.

Answer 1

If you’re just looking for the HTML and CSS, try this:

HTML

<div class="ilist">
  <div class="column">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
  </div>
  <div class="column">
    <span class="item">item5</span>
    <span class="item">item6</span>
    <span class="item">item7</span>
    <span class="item">item8</span>
  </div>
  <div class="column">
    <span class="item">item9</span>
    <span class="item">item10</span>
    <span class="item">item11</span>
    <span class="item">item12</span>
  </div>
  <div class="column">
    <span class="item">item13</span>
    <span class="item">item14</span>
    <span class="item">item15</span>
    <span class="item">item16</span>
  </div>
</div>

CSS

.ilist {
  overflow-y:hidden;
}
.column {
  float:left;
  width:200px; /* You will want to specify
                  an appropriate width */
}
.column .item {
  display:block;
  height:1em;
}

Take note though that this won’t work in the event that any two items in a row (like item1 and item7) won’t have the same height.

So this won’t work when you have/need something like this:

item1       item4       item7       item10
            item4
item2       item5       item8       item11
item3       item6       item9       item12

If you’re looking for C# you could try something like this:

IList iList = /* ... */;
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
 writer.AddAttribute(HtmlTextWriterAttribute.Class, "ilist");
 writer.RenderBeginTag(HtmlTextWriterTag.Div);
 for(int i=0; i<iList.Count; i++) {
  writer.AddAttribute(HtmlTextWriterAttribute.Class, "column");
  writer.RenderBeginTag(HtmlTextWriterTag.Div);
  for (int j = i; j <= (i/4) && i<iList.Count; j++, i++)
  {
   writer.AddAttribute(HtmlTextWriterAttribute.Class, "item");
   writer.RenderBeginTag(HtmlTextWriterTag.Span);
   writer.WriteEncodedText(iList[i]);
   writer.RenderEndTag();
  }
  writer.RenderEndTag();
 }
 writer.RenderEndTag();

}

… you of course would need to still <link> to the CSS.