how to display products using Repeater control ASP.NET

i am using repeater control to display results like any e commerce website shows, i mean horizontaly and vertically as well, but my repeater is displaying results in a list but i want it to show 4 items per row then second row then third row, but it is showing items from top to bottom like a straight line list, please tell me what to do and how can i display items like i want them to,i have already seen some answers here but those are not working as well so that's why i am posting my question

     <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="span4" style="width:187px" runat="server">
                        <div class="products">
                            <a href="='<%# Eval("ID") %>'">
                            <img alt="" src='<%# Eval("ImageLink") %>' height="195" width=""></a>
                            <br/>
                            <h3 class="title" style="font-family:Pristina;font-size:medium; width:auto;"> <%# Eval("Name") %></h3>
                            <p class="price" style="font-family:Pristina;font-size:medium;"><b>Price</b> <%# Eval("Price") %></p>
                            <a href="<%#Eval("Link") %>" style="font-family:'Malgun Gothic';font-size:medium;">www.shophive.com</a>

                            </div>
                        </div>
    </ItemTemplate> 
</asp:Repeater>

The way i want my products to be display is shown in the image, and i am filling my repeater with dataset, i want my output like these items are displayed

Solution

Wrap your repeater control in a <div> and give it a fixed width.

Add style="display:inline-block;" to <div class="span4"

<div style="width: 900px;">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div class="span4" style="display:inline-block;" runat="server">
                <div class="products">
                    <a href="='<%# Eval("ID") %>'">
                        <img alt="" src='<%# Eval("ImageLink") %>' height="195" width=""></a>
                    <br />
                    <h3 class="title" style="font-family: Pristina; font-size: medium; width: auto;"><%# Eval("Name") %></h3>
                    <p class="price" style="font-family: Pristina; font-size: medium;"><b>Price</b> <%# Eval("Price") %></p>
                    <a href="<%#Eval("Link") %>" style="font-family: 'Malgun Gothic'; font-size: medium;">www.shophive.com</a>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

Output: