Hi,
If you observe carefully the leftpanel of the image,half of the image is in some other color,and the lines that are prolonged
for the entire panel,below is the html code i used.
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td rowspan="2" id="leftpane" class="LeftPane" runat="server" visible="false" style="background:url(images/line1.GIF);background-repeat:repeat;">
<div class="classtotal">
<div class="leftpanelproperties">
div>
<div style="position: absolute; top:183px; left: 1px; z-index: 2; width: 100%;">div>
div>
td>
<td rowspan="2" style="width:555px;border-right:solid 2px #ABB8BE;" id="contentpane" class="ContentPane" runat="server" visible="false">
td>
<td style="position:fixed;width:100px;height:25px; background-color:#B8D4DF;border-right:solid 2px white;" id="RightSubContentPaneOne" class="ContentPane" runat="server" visible="false">
td>
<td style="position:fixed;width:100px;height:25px; background-color:#B8D4DF;border-right:solid 2px #CFCFCF;" id="RightsubContentPanetwo" class="ContentPane" runat="server" visible="false">
td>
<td colspan="1" rowspan="2" id="rightpane" class="RightPane" runat="server" visible="false">
<div class="rightpanelproperties">div>
<div style="position: absolute; top:182px; right: 0px; z-index: 2; width: 100%;">div>
td>
tr>
<tr>
<td colspan="2" class="ContentPane" runat="server" visible="false" id="RightSubBottomContentPane" style="height: 28px;border-right:solid 2px #CFCFCF;">
td>
tr>
<tr>
<td colspan="5" id="bottompane" class="BottomPane" runat="server" visible="false" style="height:20px;bottom:0px;position:absolute;">
td>
tr>
table>
div>
and the related css is as follows:
.leftpanelproperties
{
position:absolute;
top:160px;
left:0px;
margin:0px 0px 0px 0px;
width:6.5%;
height:57%;
background-color:#8E9FA9;
z-index: 1;
}
.rightpanelproperties
{
position:absolute;
top:160px;
right:0px;
width:6.5%;
height:57%;
background-color:#8E9FA9;
z-index: 1;
}