Force a newline <br /> while building a checkboxlist in vb.net

Question

I'm building a checkboxlist in vb.net, and it works fine, except for the layout. I'd like to force a newline at certain points. It looks something like this now:

I'd like to force a newline after either an "ALL" checkbox, OR the "repeatColumns=4", so it would look more like this:

Can this be done in code-behind? Or maybe something on the client end in javascript ?

This code is building the list now:

        While dr.Read
        mTXT = dr(0) & " (" & dr(1) & "-" & dr(2) & ")"
        LASTcnt += 1

        If (dr(0) <> LAST) Then
            If (LASTcnt > 0 And LAST <> String.Empty) Then
                'add an ALL for this 'group'
                L = New ListItem
                L.Text = LAST & " (ALL)"
                L.Value = L.Text
                'L.Attributes.Add("Style", "color: red;")
                L.Selected = False
                CBL_LOC.Items.Add(L)
                CBL_LOC.Items(CBL_LOC.Items.Count - 1).Attributes.Add("Style", "color: red;")
                dt.Rows.Add(L.Text, L.Selected)
            End If
            LASTcnt = 0
            LAST = dr(0)
        End If

        L = New ListItem
        L.Text = mTXT
        L.Value = mTXT
        L.Selected = True
        CBL_LOC.Items.Add(L)
        dt.Rows.Add(L.Text, L.Selected)
    End While

Here's the .aspx code that defines the checkboxes:

        <asp:CheckBox ID="chkAll_LOC" Text="Select All" runat="server" 
            AutoPostBack="True" Checked="True" />
        <asp:CheckBoxList ID="CBL_LOC" runat="server" RepeatDirection="Horizontal" 
            onclick="CheckCheck(this)"
            Font-Size="Small" Font-Names="Calibri" RepeatColumns="4">
        </asp:CheckBoxList>

Answer 1

If you layout each group of checkboxes within their own list, simply treating the list as a block element would take care of the new line required per 'category'. If you wrap them in a fixed width container, and have the nested li elements be inline-blocks of 1/3 the total container width, that gives you your columned layout.

Example:

<style type="text/css">
.container { width:400px;}
.container ul { display:block;}
.container ul li {  list-style:none; display:inline-block; width:90px; padding:0; margin:0; border-width:0;}
</style>
<div class="container">
    <ul>
        <li><label for="chkCT1">CT1</label><input id="chkCT1" type="checkbox" /></li>
        <li><label for="chkCT2">CT2</label><input id="chkCT2" type="checkbox" /></li>
        <li><label for="chkCT3">CT3</label><input id="chkCT3" type="checkbox" /></li>
        <li><label for="chkCTALL">CT (ALL)</label><input id="chkCTALL" type="checkbox" /></li>
    </ul>
    <ul>
        <li><label for="chkCT1">CT1</label><input id="chkCT1" type="checkbox" /></li>
        <li><label for="chkCT2">CT2</label><input id="chkCT2" type="checkbox" /></li>
        <li><label for="chkCT3">CT3</label><input id="chkCT3" type="checkbox" /></li>
        <li><label for="chkCTALL">CT (ALL)</label><input id="chkCTALL" type="checkbox" /></li>
    </ul>
    <ul>
        <li><label for="chkCT1">CT1</label><input id="chkCT1" type="checkbox" /></li>
        <li><label for="chkCT2">CT2</label><input id="chkCT2" type="checkbox" /></li>
        <li><label for="chkCT3">CT3</label><input id="chkCT3" type="checkbox" /></li>
        <li><label for="chkCTALL">CT (ALL)</label><input id="chkCTALL" type="checkbox" /></li>
    </ul>
</div>