Sol tarafa dayalı sağa doğru uzayan, ve sağ tarafta body { padding-right: 100px } koduyla 100px'lik boşluk bırakılan bir tasarımım var. İçeriğimi koyacağım div'in tamamı 5 resim ve bir arkaplan rengi olan katmanlardan oluşuyor. Ekran görüntüleriyle anlatayım.
Bu olması gereken:
http://i30.tinypic.com/o86wi0.jpg
Bu ise olan:
http://i25.tinypic.com/125m6o3.jpg
Div ve onunla ilgili CSS kodları da şöyle:
#content {width: 100%; margin: 0 150px 0 0;}
#content .t {background: url(../images/body-t.png) repeat-x; width: 100%; height: 14px; float: right; margin: 0 16px 0 0;}
#content .t .tr {background: url(../images/body-tr.png) no-repeat; width: 16px; height: 14px; float: right; margin: 0 -16px 0 0;}
#content .body {background: #cacac8; width: 100%; height: 100%; float: right; margin: 0 13px 0 0;}
#content .body .r {background: url(../images/body-r.png) repeat-y; height: 100%; width: 16px; float: right; margin: 0 -16px 0 0;}
#content .b {background: url(../images/body-b.png) repeat-x; width: 100%; height: 17px; float: right; margin: 0 16px 0 0;}
#content .b .br {background: url(../images/body-br.png) no-repeat; width: 16px; height: 17px; float: right; margin: 0 -16px 0 0;} <div id="content">
<div class="t"><div class="tr"></div></div>
<div class="body"><div class="r"></div>
<div class="content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><a href="javascript: soyle()">söyle</a>
</div>
</div>
<div class="b"><div class="br"></div></div>
</div>