Display ArrayList items 3 per row?

Question

I was wondering if it's possible to display the results from an ArrayList in such a way that there are three entries per line? Currently, I am getting all the correction information but having each entry on one line is not convenient. Is there some sort of styling I need to apply or possibly some extra code is needed when I create the ArrayList?

How it is setup is, if the entry is the "primary" address, it will display on it's own line (only one primary address per user). All other addresses are meant to display beneath the primary one with 3 entries per line (these are shipping addresses).

Any suggestions are appreciated!

This is the designer view:

  <div class="addressBook">
                <div class="entries">
                <div class="entry">
                    <div class="caption">
                        <h2>Billing Address</h2>
                    </div>
                    <div class="address">
                        <asp:Localize ID="PrimaryAddress" runat="server" Text="Please update your billing address."></asp:Localize>
                    </div>
                </div>
                <div class="caption">
                    <h2>Shipping Address</h2>
                </div>
                <asp:Repeater ID="AddressList" runat="server">
                    <ItemTemplate>
                        <div class="entry">
                            <div class="address">
                                <asp:Literal ID="Address" runat="server" Text='<%#Container.DataItem.ToString().Trim() == ","? "Please fill in your primary address.":Container.DataItem.ToString() %>'></asp:Literal>
                                <br /><asp:Literal ID="Phone" runat="server" Text='<%# getInfo(AlwaysConvert.ToInt(Eval("AddressId"))) %>'></asp:Literal><br /><br />
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
                </div>
            </div>

This is the codebehind:

public partial class AddressBook : System.Web.UI.UserControl
{
    private int _UserId;
    private User _User;

    protected void Page_Init(object sender, EventArgs e)
    {
        _UserId = AlwaysConvert.ToInt(Request.QueryString["UserId"]);
        _User = UserDataSource.Load(_UserId);

        BindAddressBook();
    }

    protected void BindAddressBook()
    {
        User user = _User;

        if (user.PrimaryAddress.IsValid)
        {
            PrimaryAddress.Text = user.PrimaryAddress.ToString(true) + "<br />" + getInfo(user.PrimaryAddress.Id);
        }
        if (user.Addresses.Count > 1)
        {
            List<Address> shippingAddresses = new List<Address>();
            shippingAddresses.AddRange(user.Addresses);

            int billingIndex = shippingAddresses.IndexOf(user.PrimaryAddressId);
            if (billingIndex > -1)
            {
                shippingAddresses.RemoveAt(billingIndex);
            }
            shippingAddresses.Sort("LastName");
            AddressList.DataSource = shippingAddresses;
            AddressList.DataBind();
        }
        else
        {
            AddressList.Visible = false;
        }
    }

}

Answer 1

One thing you can try is to wrap your repeater in a UL and put LI tags inside the Repeater's ItemTemplate. CSS styles for each LI would be inline, with a width of 33%. That would give you 3 per line.

<ul class="addresses">
<asp:Repeater ID="AddressList" runat="server">
    <ItemTemplate>
        <li class="address">
            <asp:Literal ID="Address" runat="server" Text='<%#Container.DataItem.ToString().Trim() == ","? "Please fill in your primary address.":Container.DataItem.ToString() %>'></asp:Literal>
                <br /><asp:Literal ID="Phone" runat="server" Text='<%# getInfo(AlwaysConvert.ToInt(Eval("AddressId"))) %>'></asp:Literal><br /><br />
        </li>
    </ItemTemplate>
</asp:Repeater>
</ul>

And the CSS:

ul.addresses { width: 100%; margin: 0; padding: 0; }
ul.addresses li.address { width: 33%; display: inline; }