ASP.Net Repeater Div Layout

In ASP.Net 2.0, Repeater Control ItemTemplate layout can be managed using CSS based Div layout. You can use Div float styles to display the data items retrieved from the SQL Database similar to Table layout as we discussed in the previous article about ASP.Net Repeater Table. Here we will use CSS style properties and HTML Div tag to provide the customized structure and layout to display the data items of Repeater Control placed inside the ItemTemplate. There is again no change in C# code for DataBinding with Repeater Control but you have to manage and check the Div float based CSS style layout in different web browsers. Coz each web browser displays the Div layout in different manner, sometimes floating div collapses in FireFox or new version of IE.

CSS Class Definitions Used in ASP.Net Repeater Div Layout

body { 
    font-family: arial; 
    font-size: 12px; 
}

.outer { 
    border: solid 1px #c0c0c0; 
    width: 500px; 
    padding: 2px; 
    margin: 0px 0px 2px 0px; 
}

.inner { 
    width: 496px; 
    margin: 2px auto; 
}

.innerTitle { 
    float: left; 
    width: 80px; 
    margin: 0px 5px 0px 0px; 
    background-color: #eeeeee; 
    padding:0px 0px 0px 5px; 
}

.innerContent { 
    float: left; 
    width: 400px; 
    background-color: #dddddd; 
    padding: 0px 0px 0px 5px; 
}

.clear { 
    clear:both; 
}

HTML Source code for ASP.Net Repeater Div Layout

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div class="outer">
            <div class="inner">
                <div class="innerTitle">
                    <b>Category:</b></div>
                <div class="innerContent">
                    <%#DataBinder.Eval(Container.DataItem,"categoryName") %>
                </div>
            </div>
            <div class="clear">
            </div>
            <div class="inner">
                <div class="innerTitle">
                    <b>Description:</b></div>
                <div class="innerContent">
                    <%#DataBinder.Eval(Container.DataItem,"description") %>
                </div>
            </div>
        <div class="clear">
        </div>                                
        </div>
    </ItemTemplate>
</asp:Repeater>

Get the C# code for Sql Database databinding from Repeater Control Databinding tutorial. [Note: Please change the SQL query to "select * from categories" to use the C# code with this sample.]

Continue to next tutorial: ASP.Net Repeater Control HTML UL LI CSS Styles to learn the use of HTML unordered listing tag to display the list of data items in Repeater Control.