change layout from table to div

Hi, all

I am change my webpage to using div and css for my layout, it was
using table before and I want to get rid of it.
Basically it draws a box around my content using background pictures,
but I can not get the left-border and right-border of the box working
using div. Anybody can help me?


Thanks in advance
-rockdale


here is my layout using table:

<table cellspacing="0" cellpadding="0" width="100%" align="center"
border="0" style="height: 100%">
<tbody>
<tr>
<td class="top_left"></td>
<td class="top_mid"></td>
<td class="top_right"></td>
</td>
</tr>
<tr>
<td class="center_left"></td>
<td align="left" bgcolor="#ffffff" valign="top">
CONTENT GOES HERE
</td>
<td class="center_right"></td>
</tr>
<tr>
<td class="bottom_left"></td>
<td class="bottom_mid"></td>
<td class="bottom_right"></td>
</tr>
</tbody>
</table>


and my css

td.top_left
{
background-image: url("images/top_lef_16_32.gif");
background-repeat:no-repeat;
vertical-align: bottom;
height:32px;
width: 16px;
margin-bottom:0px;


}
td.top_right
{
background-image: url("images/top_rig_24_32.gif");
background-repeat:no-repeat;
vertical-align: bottom;
height:32px;
width: 24px;
margin-bottom:0px;


}

td.top_mid
{
background-image: url("images/top_mid_16_32.gif");
background-repeat: repeat-x;
vertical-align: bottom;
margin-bottom:0px;
height:32px;

}

td.center_left
{
background-image: url("images/cen_lef.gif");
width: 16px;
}
td.center_right
{
background-image: url("images/cen_rig.gif");
width: 24px;
}

td.bottom_left
{
background-image: url("images/bot_lef.gif");
background-repeat:no-repeat;
height: 16px;
width: 16px;
}

td.bottom_mid
{
background-image: url("images/bot_mid.gif");
height:16px;
background-repeat: repeat-x;
}

td.bottom_right
{
background-image: url("images/bot_rig.gif");
background-repeat:no-repeat;
height: 16px;
width: 24px;
}


-------------------
my div
<div>
<div class="tabTopLeftCorner"></div><div class="tabTopBorder"></
div><div class="tabTopRightCorner"></div>
<div class="clear"></div>
<div class="tabLeftBorder"></div>
<div>
CONTENT GOES HERE

</div>
<div class="tabrightborder"></div>
<div class="clear"></div>
<div class="tabBottomLeftCorner"></div>
<div class="tabBottomBorder"></div><div class="tabBottomRightCorner"></
div>
<div class="clear"></div>
</div>
</div>


css for my div

.tabTopBorder
{
background-image: url("images/top_mid_16_16.png");
background-repeat: repeat-x;
border: solid 1px red;
height:16px;
width: 858px;

}


.tabBottomBorder
{
background-image: url("images/bot_mid.gif");
background-repeat: repeat-x;
border: solid 1px red;
height: 16px;
width: 858px;
}
.tabLeftBorder
{
background-image: url("images/cen_lef.gif");
background-repeat: repeat-y;
width:16px;
float:left;
border: solid 1px red;
height: 100%;

}

.tabRightBorder
{
background-image: url("images/cen_rig.gif");
background-repeat: repeat-y;
width:24px;
float:right;
border: solid 1px red;

}

.tabTopLeftCorner
{
background-image: url("images/top_lef.gif");
background-repeat: no-repeat;
width:16px;
height:32px;
float:left;
}

.tabTopRightCorner
{
background-image: url("images/top_rig.gif");
background-repeat: no-repeat;
width:24px;
height:32px;
float:right;
}

.tabBottomLeftCorner
{
background-image: url("images/bot_lef.gif");
background-repeat: no-repeat;
width:16px;
height:32px;
float:left;
}

.tabBottomRightCorner
{
background-image: url("images/bot_rig.gif");
background-repeat: no-repeat;
width:24px;
height:32px;
float:right;
}

In article
<1db8420d-b55a-4d93-8d6e-fe03dbdd23bb (AT) z66g2000hsc (DOT) googlegroups.com>,
rockdale <rockdale.green (AT) gmail (DOT) com> wrote:

Hi, all

I am change my webpage to using div and css for my layout, it was
using table before and I want to get rid of it.
Basically it draws a box around my content using background pictures,
but I can not get the left-border and right-border of the box working
using div. Anybody can help me?

It would be nice if you had posted a url showing your before and after.
It's not so hard to do...

--
dorayme