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;}
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>