Formatting a grid-like div in css

Question

So I am having some trouble formatting my data into rows of 3, and then have the 4 start at the top of next row. I am also doing this in bootstrap CSS framework.

Please forgive my extremely poor design, but this is what I am talking about:

Stack won't let me post images, so this is a link to the image. On my github, it's safe

So again, I am trying to have my data (this would be in a foreach loop) organized as such. I have tried a couple things but nothing seems to work.

@foreach (var question in Model)
{
    string link = "http://www.stackoverflow.com" + @question.QuestionLink;

    
        
            
                
                    @Html.DisplayFor(modelItem => question.QuestionTitle)
                
            
        
    
}

This is one solution I tried, before doing rows I simply wanted to see if I can organize them in 1 row and then I would move to 2.

This is the result with the current code:

Stack won't let me post images, so this is a link to the image. On my github, it's safe

Also, I know this is in C#HTML but the html/css part is all the same, so if you don't know about the foreach loop part, or the '@' signs, don't worry about it.

UPDATE HTML ONLY PART IF CONFUSED

JakobMiller · Accepted Answer

http://jsfiddle.net/a5800uj5/

Not sure if this what you are looking for? Remember that you can asign amount of columns that one cell should cover with colspan.

If you are going to be structured with tables. Used them all the way through with tables, table headers, table rows and table columns.

Formatting a grid-like div in css

Answers (1)

Related Questions