Home/ Questions/Q 8922967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T06:59:02+00:00

I am working on a mvc 4 web application. I am a newbie (just

  • 0

I am working on a mvc 4 web application. I am a newbie (just started a few days ago, so please be good to me).

So I have managed to get data from a Repository class into a View. No problem here. But the problem is that I want to make it so that this data is displayed horizontally, in two columns with two blocks in each column. So far the data is being laid out vertically, top to bottom. 

<div id="myID">
    @foreach(var stuff in Model)
    {
        <article>@stuff.title</article>
    }
</div>

The above code is a simplified version of what I have going on. But again, the data is shown just like list, top to bottom display, and I want the data to be displayed like this:

A  B
C  D

Any help will be very appreciated.

Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    One way you could achieve your goal (without using nasty tables) is to use CSS to layout your articles.

    A simpler way to explore such HTML related issues is to create a simple HTML page containing just the elements you’re looking for:

    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div#articles {
            width: 450px;
            border: solid 1px red; /* For debugging purposes */
        }

        div#articles article{
            display: inline-block;      /* Force the article to be displayed in a rectangular region laid out next to one another */
            margin: 5px;                /* Leave a little room between each article */ 
            width: 200px;               /* Limit the maximum width of the article so that only two fit side-by-side within the div */
            text-align: center;         /* Center the text horizontally */
            vertical-align: middle;     /* Center the text vertically */
            border: solid 1px green;    /* For debugging purposes - so you can see the region the articles live within */
        }
    </style>
</head>
<body>
    <div id="articles">
        <article>Article A</article>
        <article>Article B</article>
        <article>Article C</article>
        <article>Article D</article>
    </div>
</body>
</html>

    Articles, paragraphs and the like are normally laid out as flowed elements sized to the width of the element that contains them (the DIV in your example).

    You want your articles to be laid out in a grid-like pattern and so you need to tell the browser to render these particular elements as “block”s. Furthermore, you want the blocks flowed within their parent such that only two blocks can fit side-by-side within the containing DIV.

    So, using CSS styling you can:
    1. Set your DIV’s width to a fixed size
    2. Set your articles to be rendered as “inline-block” style
    3. Set your articles’ width so only two can fit on each row
    Optionally:
    4. Center your articles’ text if necessary
    5. Set your articles’ margins to leave a little room between each one
    6. To better see the regions within which each element lives, use a simple 1px colored border

    This approach results in the following layout:
    enter image description here

    HTH.

    • 0