align the images in a repeater control

Posted on 2007-10-01
Last Modified: 2010-08-05
I am using a repeater control to display thumbnails from a database. When the page loads, it displays 25 thumbnails. What I want to do here is display 4 images per line and the position should be fixed. What would I have to do to make this happen? Any other images should go to the next line but only 4 in a line. I hope I am cleared.
Question by:siddhuoops
    LVL 16

    Accepted Solution

    I never done this before, but just show you an idea.

    Do you know flowlayout?

    If a fixed region has items inside it. It will wrap them to new line within the fixed width itself from left -> right & top -> bottom.

    You may create a fixed region (I mean a fixed-width table). This table contains a repeater which generates tables of image. You have to plan for width of region and image's table inside the region.

    For example

    the region width = 400px
    image's table = 100px

    400 / 100 = 4       (I hope you understand this point)

    Another solution is write your own logic to arrange images from SqlDataReader.
    LVL 7

    Expert Comment

    Assuming you're using flow layout, you can create an HTML table in your repeater template,  insert an asp:literal control in your item template, then set the literal to "<tr>" before every 4th item and "</tr>" after every 4th item.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Suggested Solutions

    Article by: Ivo
    C# And Nullable Types Since 2.0 C# has Nullable(T) Generic Structure. The idea behind is to allow value type objects to have null values just like reference types have. This concerns scenarios where not all data sources have values (like a databa…
    In order to hide the "ugly" records selectors (triangles) in the rowheaders, here are some suggestions. Microsoft doesn't have a direct method/property to do it. You can only hide the rowheader column. First solution, the easy way The first sol…
    Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
    Here's a very brief overview of the methods PRTG Network Monitor ( offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now