how do I automatically generate div's for the search results in my website?

See more:

C#

ASP.NET

Javascript

CSS

jQuery

hi...
I create one empty div and I fill it's data with my value's in the database...
my problem is that I don't know how to control them, what i need is that when they reached a certain point they go to the next line and show the rest of the result in following line.
here is my C# code:

protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        var q = dc.Productions.Select(c => new { c.ID, c.Image, c.Info, c.Name, c.PurchaseItems, c.Price , c.cat_ID });
        foreach (var item in q)
        {
            if (Convert.ToInt32(Request.QueryString.Get("cat_ID")) == Convert.ToInt32(da.getCatNameByName(DropDownList1.SelectedValue)));
            {
                HtmlGenericControl newControl = new HtmlGenericControl("div");
                newControl.ID = item.ID.ToString();

                newControl.InnerHtml = "<div class='col-md-4 product-left single-left'><div class='p-one simpleCart_shelfItem'><a href='EachSample.aspx?id=" + item.ID + "'><img src=../AdminCP/ProductImages/" + item.Image + " alt='' /><div class='mask mask1'><span>Quick View</span></div></a><h4>" + item.Name + "</h4><p><a class='item_add' href='#'> <span class=' item_price'>" + item.Price + "</span></a></p></div></div>";
                main.Controls.Add(newControl);
            }

        }
    }

And this is my asp.net code:

<div style=" background-color:white; width:100%" class="col-md-9 p-left">
           <div class="product-one">
           <div id="main"  runat="server" class="col-md-4 product-left single-left">

           </div>
           <div class="clearfix"> </div>
       </div>
       </div>

the C# codes generate the div's in the 'main' div.