ajax control drag panel inside a fixed side bar

Can anyone help me with a css for the follwoing?

I am using 3 css classes.

I want the header content to be fixed as the gridview shows the present status. When I am not using the  DragPanelExtender, the header is placed to the right. After including the dragpanelextender, the header is out of focus in my screen. Actually I cannot see it, unless I zoom out.     If the size of the website window is reduced, the panel status overlaps on the main content. If the DragPanelExtender is used,  one can move the panel. 

#container {     width: 1200px;     max-width: 100%;     margin-left:  50px;     margin-right: auto;     margin-top: 30px;     position: relative;     min-height: 100%;     top: 109px;     left: 0px;     height: 2310px; }
#maincontent {     width:900px;     padding: 1em;     margin-left:auto;     background-color: white; }
#header {     position: fixed;     z-index: 20;     width: 100px;     padding-top: 25px;     text-align: left;     right: 40%;     margin-left:0px; }<div id="container"><div id="maincontent">
  4 panels with detailsviews</div></div><div id="header"><asp:Panel ID="Panel1" runat="server"><asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False" DataKeyNames="Status_Id"
                    DataSourceID="dsCurrentStatus" Width="150px" ><Columns><asp:BoundField DataField="Status_Id" HeaderText="Status_Id" ReadOnly="True" SortExpression="Status_Id"
                            Visible="False"></asp:BoundField></Columns><HeaderStyle BackColor="#003366" ForeColor="White" /></asp:GridView></asp:Panel><cc1:DragPanelExtender ID="Panel1_DragPanelExtender" runat="server"
                DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1"></cc1:DragPanelExtender></div>