In this topic you will associate two C1SplitterExtender controls with two Panel controls.

1. In your Web application, add a standard Panel control to the main content of  your page and within the <div> tags of the first panel, add a second panel. Set the Width and Height for both panels. The markup should look similar to this:

<asp:Panel ID="Panel1" runat="server" Width="300" Height="300px">

        <div>Panel1</div>

        <div>

            <asp:Panel ID="Panel2" runat="server" Width="200" Height="200px">

                <div>Panel2</div>

            </asp:Panel>      

        </div>

    </asp:Panel>

Drag two C1SplitterExtender controls to the page.

2. Select the C1SplitterExtender markup for the first control, and in the Visual Studio Properties window, set the TargetControlID property to Panel1. The markup will look like this:

<cc1:C1SplitterExtender ID="Panel1_C1SplitterExtender" runat="server"

        TargetControlID="Panel1">

    </cc1:C1SplitterExtender>

4. Select the C1SplitterExtender markup for the second control and set the TargetControlID property to Panel2. The markup will look like this:

<cc1:C1SplitterExtender ID="Panel2_C1SplitterExtender" runat="server"

        TargetControlID="Panel2">

</cc1:C1SplitterExtender>

Now you can begin setting properties for the C1SplitterExtenders.