Search code examples
cssasp.netrepeater

CSS styling in repeater control

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

enter image description here 

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

enter image description here

Solution

  • 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.