How to prevent that 2 LinkButtons get separeted by line break in Repeater? - html

Question

I have a Repeater with 2 LinkButtons that need to be displayed next to each other to build a graphical unit. Depending on the window size the line break would break that unit. How can I tie these 2 elements together? I was fiddling with div but the result was that each result of the repeater is displayed in a new row, while I need them to be displayed horizontal.
<asp:Repeater runat="server" id="RepeaterUsers" >
<ItemTemplate>
<div style="display:inline;">
<div style="white-space:nowrap;">
<asp:LinkButton ID="LB1" runat="server" OnClick="SelectUser"><asp:Label runat="server" Text='<%# Bind("Name") %>' ID="RepeaterName"/>
</asp:LinkButton><asp:LinkButton ID="LB2" runat="server" OnClick="EliminateUser"><img src="img/close33.png"></asp:LinkButton></div><asp:Label runat="server" Text=" " Height="24px" ID="LabelSpace"/></div>
</ItemTemplate>
</asp:Repeater>
The final solution is:
<asp:Repeater runat="server" id="RepeaterUsers" >
<ItemTemplate>
<div style="float:left">
<table class="RepeaterTable">
<tr>
<td class="RepeaterTD">
<asp:LinkButton ID="ButtonHWReminderAudit" runat="server" OnClick="SelectUser" Font-Size="11px" CommandArgument='<%# Bind("Name") %>' CssClass='<%# Eval("CSSName") %>' ><%# Eval("DisplayName") %></asp:LinkButton></td>
<td class="RepeaterTD">
<asp:LinkButton ID="LinkButton4" runat="server" CommandArgument='<%# Bind("Name") %>' OnClick="EliminateUser" Font-Size="11px" CssClass='<%# Eval("CSSX") %>'>
<img src="img/close33.png" border="0" style="vertical-align:text-bottom;height:21px"></asp:LinkButton></td>
<td class="RepeaterTD">
<asp:Label runat="server" Text=" " Height="25px" ID="LabelSpace"/></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
and CSS:
.RepeaterTable {border-spacing:0;border-collapse:collapse;float:left;}
.RepeaterTD {padding: 0px;}
The column "Name" carries white spaces which occasionally might lead to a line break within one cell. Therefore I had to replace whitespace with a non-breakable-space (nbsp;) first.
In order to avoid gaps between the cells, you have to set spacing and padding to 0. This would provoke that no distance is kept between the tables. To set horizontal and vertical distances I added an additional cell.

Answer 1

I think you are looking for float: left
<asp:Repeater runat="server" ID="RepeaterUsers">
<ItemTemplate>
<div style="float: left; margin-bottom: 24px; clear: both">
<asp:LinkButton ID="LB1" runat="server"><%# Eval("Name") %></asp:LinkButton>
<asp:LinkButton ID="LB2" runat="server"><img src="img/close33.png"></asp:LinkButton>
</div>
</ItemTemplate>
</asp:Repeater>
Update
You could also use a table to align items, that always works. Although that is a bit old-school and against HTML-purists.
<table cellspacing="0" cellpadding="3" border="0">
<asp:Repeater runat="server" ID="RepeaterUsers">
<ItemTemplate>
<tr>
<td>
<asp:LinkButton ID="LB1" runat="server"><%# Eval("Name") %></asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="LB2" runat="server"><img src="img/close33.png"></asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>