9 - mengatur jarak header dan footer di bagian luar

untuk mengatur JARAK LUAR atau JARAK ANTARA KOLOM YANG SATU DENGAN LAINNYA , maka berlaku MARGIN .
bila melihat kedua gambar dibawah , jelas terlihat header ada jarak dari auter-wrapper.
dan footer berdempetan dengan main-wrapper .
disinilah fungsi margin digunakan atau di edit . cara menghitung margin pada template ini [minima 2004] adalah ;
0[atas] 0[kanan] 0[bawah] 0[kiri].

susunan margin di header bawaan template adalah ;

#header-wrapper{
width:auto;
margin:0 auto 10px;
bla bla bla
}

agar susunan diatas tak membuat kalian bingung maka ubah susunan marginnnya kalau mau .
kalau dibiarkan begitu , juga tak apa .
bila ingin di edit maka hasilnya;

#header-wrapper{
width:auto;
margin:0 0 10px 0;
bla bla bla
}

ukuran 10px itu tak baku , terserah tampilan jarak yang kalian suka ,
dan itu adalah jarak antara kotak header dan kotak auter-wrapper .

adapun jarak footer dan main-wrapper, maka ubah marginnya di main-wrapper .
jikalau margin tak ada , maka tambah susunannya .

pada susunan bawaan minima 2004 , margin tak ada , maka tambah susunannya .

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

hasilnya ;

#main-wrapper {
width: 410px;
border:1px solid #000;
float: left;
margin:0 0 10px 0; DISINI 10PX UKURAN JARAK BAWAH
word-wrap: break-word;
overflow: hidden;
}

bentuk tagalog keterangan dibawah ini , itu hapus saja , kalau mau ;

/* fix for long text breaking sidebar float in IE */
/* fix for long non-text content breaking IE sidebar float */

adapun jarak footer ke atribut maka edit di footernya [ kalau atributnya tak dihapus ] ,
minima 2004 margin footernya telah ada , tinggal di edit;

#footer {
width: 660px;
clear: both;
margin: 0 auto;
bla bla bla
}

#footer {
width: 660px;
clear: both;
margin:0 0 20px 0; JARAK ATRIBUT DAN FOOTER KEBAWAH .
bla bla bla
}