Question

I am passing a list to the view from Controller. How can i generate the following type of HTML by using the Model passed…….
.

I tried using the following code, but it generates a vertical list whereas i want it to be horizontal as well as vertical. Here’s my code. How will you write your’s to achieve an output like above

@foreach (var cats in Model)
{
    <li>@cats.CategoryName</li>
}

Answer 1

You need to combine this mark-up with some css:

<ul class="two-columns clearfix">
@foreach (var cats in Model)
{
    <li>@subcats.CategoryName</li>
}
</ul>

Then the CSS:

ul.two-columns li
{
    width: 50%;
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* Clear Fix */
.clearfix:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}


* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */