ممكن كود أعمدة التمدد

<!-- بداية الهيدر -->
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
<!-- نهاية الهيدر -->

<!-- بداية الأعمدة -->
<div class="shadowright">
<div class="shadowleft">
</div>
</div>
<!-- نهاية الأعمدة -->

<!-- بداية الفوتر -->

  <div class="right"></div>
  <div class="left"></div>
  <div class="tmdd"></div>
 </div>
 <!-- نهاية الفوتر -->

/* *** start css style *** */
/* عرض الجدول */
#content {
width: 100%;
margin: 0px auto;
}
/* نهاية عرض الجدول */
/* بداية الهيدر */
#header {
background: url(رابط تمدد الهيدر.gif) repeat-x;
height: 111px;
}
#header .right {
background: url(رابط الزاوية اليمنى للهيدر.gif) no-repeat;
height: 111px;
width: 111px;
float: right;
}
#header .left {
background: url(رابط الزاوية اليسرى للهيدر.gif);
height: 111px;
width: 111px;
float: left;
}
#header .middle {
background: url(رابط صورة الهيدر في الوسط.gif) no-repeat;
height: 111px;
margin-right: auto;
margin-left: auto;
width: 111px;
}
/* نهاية الهيدر */
/* بداية الأعمدة */
.shadowleft {
background: url(رابط العمود الأيسر.gif) no-repeat left;
padding-left: 111px;
}
.shadowright {
background: url(رابط العمود الأيمن.gif) no-repeat right;
padding-right: 111px;
}
/* نهاية الأعمدة */
/* بداية الفوتر */
#footer {
background: url(رابط تمدد الفوتر) repeat-x;
height: 111px;
}
#footer .right {
background: url(رابط الزاوية اليمنى للفوتر) no-repeat;
float: right;
height: 111px;
width: 111px;
}
#footer .left {
background: url(رابط الزاوية اليسرى للفوتر) no-repeat;
float: left;
height: 111px;
width: 111px;
}
#footer .middle {
background: url(رابط الصورة الوسطى للفوتر) no-repeat;
height: 111px;
width: 111px;
margin-right: auto;
margin-left: auto;
}
/* نهاية الفوتر */
/* *** end css style *** */