CSS styling in repeater control - css

Question

Hi friends i am trying to make my repeater look like the img i have attached . I have achieved till the line Total cover but the 50% total cover line giving me headache in alignment. Can someone please guide me on this
<asp:Repeater ID="TreeRepeater" runat="server" DataSourceID="TreeSource" OnItemDataBound="TreeRepeater_ItemDataBound">
<ItemTemplate>
<div>
<div style="float: left; width: 15px; text-align: right;"><%# Container.ItemIndex + 1 %>.</div>
<div style="float: left; width: 230px; border-bottom: 1px solid black;margin-right:5px"><%# Eval("ScientificName") + ", " + Eval("CommonName")%></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"><%# string.Format("{0:0.##}",Eval("PercentageCover")) %></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px; vertical-align:text-bottom"><asp:Image ID="TreeDominantImg" runat="server" ImageUrl="~/Images/Xmark.png" Height="16px" Width="16px" Visible='<%# ((Eval("Dominant") == DBNull.Value)?(short)0:(short)Eval("Dominant")) == 1 ? true : false %>' /></div>
<div style="float: left; width: 45px; text-align: center; border-bottom: 1px solid black;"><%# Eval("Indicator")%></div>
<div style="clear: both;"></div>
</div>
</ItemTemplate>
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"></div>
<div style="float: left; width: 45px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server"/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="display:inline-block; width: 100px;"></div>
<div style="display:inline-block;width:120px;">50% of total cover:</div>
<div style="display:inline-block;width:40px;border-bottom: 1px solid black;"><asp:Label ID="Label6" runat="server"/></span></div>
<div style="display:inline-block;width:120px;">20% of total cover:</div>
</div>
</FooterTemplate>

Answer 1

I prefer to use display: inline-block rather than float: left because if you use float: left, it will exit the current flow of the element. You can change the div in ItemTemplate to this (Just copy the style, not the entire code)
<div>
<div style="display: inline-block; width: 15px; text-align: right;">1.</div>
<div style="display: inline-block; width: 230px; border-bottom: 1px solid black;margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black; margin-right:5px;"></div>
<div style="display: inline-block; width: 45px; text-align: center; border-bottom: 1px solid black;"></div>
<div style="clear: both;"></div>
</div>
and the FooterTemplate to this (Again just copy the style)
<div>
<div style="display: inline-block; width: 254px;"></div>
<div style="display: inline-block; width: 45px; text-align: center;border-bottom: 1px solid black;"></div>
<div style="display: inline-block;">= Total Cover</div>
</div>
<div>
<div style="display:inline-block; width: 44px;"></div>
<div style="display:inline-block;width:130px;">50% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
<div style="display:inline-block;width:130px;">20% of total cover:</div>
<div style="display:inline-block;width:45px;border-bottom: 1px solid black;"></div>
</div>
then it will results just like in this DEMO
Note: If any of the words inside footer wrapped to a new line, just edit the width that you use.

Answer 2

try the following:
<FooterTemplate>
<div>
<div style="float: left; width: 250px;"> </div>
<div style="float: left; width: 45px; height:15px; text-align: center;border-bottom: 1px solid black;"><asp:Label ID="PercentSum" runat="server" Text=" "/></div>
<div style="float: left;"> = Total Cover</div>
<div style="clear: both;"></div>
</div>
<div>
<div style="float: left; width: 60px;"> </div>
<div style="float: left;">50% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label6" runat="server" Text=" "/></span></div>
<div style="float: left;"> </div>
<div style="float: left;">20% of total cover: </div>
<div style="float: left; width:40px;border-bottom: 1px solid black; height:15px;text-align: center;"><asp:Label ID="Label1" runat="server" Text=" "/></span></div>
<div style="clear: both;"></div>
</div>
</FooterTemplate>