Website
<body>
<div id=”outer-wrapper”>. . . . . . </div>
</body>
Kode CSS:
#outer-wrapper { . . . . ;}
2. Header Wrapper
Fungsi dari header wrapper ini adalah untuk mengatur layout bagian header. Yang biasanya untuk nama dan iklan. Untuk penggunaan secara umum seperti ini:
<body>
<div id=”outer-wrapper”>
<div id=”header-wrapper”> . . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #header-wrapper { . . . . ;}
3. Content Wrapper
Untuk fungsi element content wrapper ini saya kurang begitu jelas, namun secara prinsip ini sama dengan fungsi main-wrapper. Menurut saya ini bisa digunakan untuk pembungkusan main-wrapper dan sidebar-wrapper.
<body>
<div id=”outer-wrapper”>
<div id=”header-wrapper”> . . . . </div>
<div id=”content-wrapper”> . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper { . . . . ;}
4. Main Wrapper
Fungsi dari main wrapper ini adalah untuk tempat posting, biasanya terletak di bagian tengah. Untuk penggunaan secara umum seperti ini:
<body>
<div id=”outer-wrapper”>
<div id=”header-wrapper”> . . . . </div>
<div id=”content-wrapper”>
<div id=”main-wrapper”> . . . . </div>
</div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper #main-wrapper { . . . . ;}
Fungsi dari element ini pasti pada udah tahu, sidebar wrapper digunakan untuk penempatan widget atau fungsi dari fitur lain. Letak sidebar ini biasanya di sebelah kanan atau kiri. Untuk penggunaan secara umum:
<body>
<div id=”outer-wrapper”>
<div id=”header-wrapper”> . . . . </div>
<div id=”content-wrapper”>
<div id=”main-wrapper”> . . . . </div>
<div id=”sidebar-wrapper”> . . . . </div>
</div>
</div>
</body>
Kode CSS:
#outer-wrapper #content-wrapper #sidebar-wrapper { . . . . ;}
6. Footer
Fungsi footer ini biasanya untuk credit link atau informasi mengenai siapa pembuat template. Letak footer paling bawah. Penggunaannya seperti ini:
<body>
<div id=”outer-wrapper”>
<div id=”header-wrapper”> . . . . </div>
<div id=”content-wrapper”>
<div id=”main-wrapper”> . . . . </div>
<div id=”sidebar-wrapper”> . . . . </div>
</div>
<div id=”footer”> . . . . </div>
</div>
</body>
Kode CSS:
#outer-wrapper #footer { . . . . ;}