Помогите составить окно

[Verhal]

у меня есть окно, которое составлено из div-ов:

<div id="xw" style="left:100px; top:60px;">
<div class="xw-tl">
<div class="xw-tr">здесь заголовок
<div class="xw-tc">
</div></div></div>
<div class="xw-bl">
<div class="xw-br">здесь содержимое
<div class="xw-bc">
</div></div></div>
<div class="xw-ml">
<div class="xw-mr">
<div class="xw-mc">
</div></div></div></div>

ну и css:

#xw {position:absolute; border:0; width:260px; height:120px;}
.xw-tl{background:url(./k1.png); position:relative; height:20px; width:20px; border:0; zoom:1;}
.xw-tr{background:url(./k3.png); position:relative; width:220px; height:20px; border:0; zoom:1;}
.xw-tc{background:url(./k2.png); position:relative; height:20px; width:20px; border:0; zoom:1;}

.xw-bl{background:url(./m4.png); height:80px; width:20px; border:0; zoom:1;}
.xw-br{border:0px; padding:0; margin:0; background:white; color:black; height:80px; zoom:1; width:220px; border:0;}
.xw-bc{background:url(./m8.png); height:80px; width:20px; border:0; zoom:1;}

.xw-ml{background:url(./m5.png); height:20px; width:20px; border:0; zoom:1;}
.xw-mr{background:url(./m7.png); height:20px; width:220px; border:0; zoom:1;}
.xw-mc{background:url(./m6.png); height:20px; width:20px; border:0; zoom:1;}

мне нужно, чтоб при изменении заголовка и содержимого элементы окна никуда не смещались, но при моих настройках элементы смещаются.

и получается вот такая картина:

помогите пожалуйста с этим разобраться

[psywalker]

Покажи скриншот того, что должно быть правильным.

[Verhal]

вот так:

[psywalker]

Делаешь у блока бордеры кроме верхнего, далее раскидываешь по углам рисунки с углами, а потом уже делаешь что хош.