Membuat tampilan dua kolom yang fleksibel

Bagaimana membuat tampilan website dua kolom yang fleksibel? Yang saya maksud tampilan yang fleksibel adalah tampilan website yang bisa melebar dan menyempit sesuai dengan ukuran layar browser. Dengan menggunakan tabel masalah ini dengan mudah ditangani, tetapi bagaiman jika tidak menggunakan tabel? sesuai dengan tren desain saat ini yaitu tableless alias tanpa table. Hal inilah yang akan saya bahas pada tulisan ini.
Misalnya kita akan membuat tampilan website dengan dua kolom fleksibel yang dilengkapi dengan header dan footer dan area utama berada di sisi kanan seperti pada gambar berikut.

Untuk membuat dua kolom yang fleksibel kita bisa menggunakan margin negatif. Margin negatif memungkinkan area utama menjauh dari sisi browser dan memberikan tempat untuk bagian samping (sidebar).

Kode HTML

Pertama kita buat kode html untuk merepresentasikan layout seperti pada gambar di atas.

<div id="header">HEADER</div>
<div id="content-wrapper">
 <h1>Lorem Ipsum</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris nulla, sollicitudin at, lobortis ac, sollicitudin a, ipsum. Sed nec urna. Nunc varius. Aliquam sit amet enim. Donec lorem. Sed hendrerit nisl ac ligula. Etiam faucibus lectus vel ipsum. Praesent tincidunt, risus quis interdum iaculis, justo tellus posuere dui, vel interdum libero purus venenatis sem. Curabitur dictum, lacus at imperdiet ultrices, nulla dui consectetur ligula, tincidunt rutrum enim elit ac est. Aliquam erat volutpat. Nulla ornare. Donec euismod tortor vel urna. Nullam vel nisi non orci volutpat semper.</p>
 <p>Aliquam erat volutpat. In accumsan tempus est. Etiam id elit nec ligula suscipit convallis. Aenean et risus non massa sodales scelerisque. Vestibulum a nunc nec sapien lacinia tristique. Phasellus ullamcorper pede at arcu. Nulla vel nisi vitae diam aliquet pretium. Nullam condimentum. Pellentesque molestie ullamcorper nulla. Aliquam sodales. Nullam mattis libero at libero. Praesent vehicula consectetur neque. Suspendisse id nunc at quam eleifend placerat.</p>
 <p>Donec quis ante a ligula congue luctus. Suspendisse arcu dolor, blandit et, ornare non, tincidunt nec, eros. Morbi nec nisl nec sapien ultricies porttitor. Fusce eu pede vitae velit euismod vulputate. Curabitur vehicula, urna non laoreet ornare, odio diam feugiat sem, sit amet lobortis est elit et nunc. Maecenas ut orci vitae quam sodales facilisis. Duis augue lorem, fringilla eget, mollis vel, imperdiet nec, magna. Sed cursus sapien a augue. Maecenas lorem. Morbi porta leo. Phasellus vitae quam. Aliquam erat volutpat. Integer massa nibh, lacinia sed, vulputate sed, bibendum consectetur, nibh. Fusce cursus tempus diam.</p>
</div>
<div id="sidebar">
 <h2>Bagian Samping</h2>
 <ul>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
 </ul>
</div>
<div id="footer">FOOTER</div>

Silahkan lihat contoh 1 untuk melihat tampilan kode html tersebut. Pada tampilan kode di atas tampak bahwa bagian ini (area utama) berada di atas bagian samping. Kita akan buat bagian isi berada di sebelah kanan sedangkan bagian samping berada di sebelah kiri. Untuk membuat bagian isi fleksibel, logikanya adalah bagian isi mempunyai lebar yang merupakan sisa dari lebar layar dikurangi lebar bagian samping. Misalkan bagian samping mempunyai lebar 200px, maka bagian ini mempunyai lebar 100% – 200px. Dengan menggunakan margin negatif kita bisa membuatnya.

Kode CSS

Kita akan buat kode css dengan ketentuan sebagai berikut, bagian samping berada di sisi kiri dengan lebar 200px, bagian isi berada di sisi kanan dengan lebar 100%-200px, bagian header berada di atas dan bagian footer berada di bawah. Pada bagian samping kita kasih float:left untuk membuatnya berada pada sisi kiri dan pada bagian isi kita kasih float:right untuk membuatnya berada pada sisi kanan. Pada bagian ini kita tambahkan margin negatif supaya bagian samping bisa berada di samping bagian isi dan kita berikan margin-left:-200px.

#header{
 background:#c5c5c5;
}
#content-wrapper{
 width:100%;
 float:right;
 margin-left:-200px;
}
#sidebar{
 width:200px;
 float:left;
 background:#cfcfcf;
}
#footer{
 background:#c5c5c5;
 clear:both;
}

Hasil penambahan css tersebut dapat dilihat pada contoh 2. Tampak pada contoh 2 bahwa bagian samping sudah berada di sisi kiri, tapi ada masalah karena pada contoh 2 terlihat bahwa bagian samping menumpuk pada bagian isi. Untuk mengatasinya kita tambahkan sebuah div pada bagian isi dengan memberikan margin-left:200px pada div tambahan ini. Dan kode htmlnya seperti berikut.

<div id="content-wrapper">
 <div id="content">
  <h1>Lorem Ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mauris nulla, sollicitudin at, lobortis ac, sollicitudin a, ipsum. Sed nec urna. Nunc varius. Aliquam sit amet enim. Donec lorem. Sed hendrerit nisl ac ligula. Etiam faucibus lectus vel ipsum. Praesent tincidunt, risus quis interdum iaculis, justo tellus posuere dui, vel interdum libero purus venenatis sem. Curabitur dictum, lacus at imperdiet ultrices, nulla dui consectetur ligula, tincidunt rutrum enim elit ac est. Aliquam erat volutpat. Nulla ornare. Donec euismod tortor vel urna. Nullam vel nisi non orci volutpat semper.</p>
  <p>Aliquam erat volutpat. In accumsan tempus est. Etiam id elit nec ligula suscipit convallis. Aenean et risus non massa sodales scelerisque. Vestibulum a nunc nec sapien lacinia tristique. Phasellus ullamcorper pede at arcu. Nulla vel nisi vitae diam aliquet pretium. Nullam condimentum. Pellentesque molestie ullamcorper nulla. Aliquam sodales. Nullam mattis libero at libero. Praesent vehicula consectetur neque. Suspendisse id nunc at quam eleifend placerat.</p>
  <p>Donec quis ante a ligula congue luctus. Suspendisse arcu dolor, blandit et, ornare non, tincidunt nec, eros. Morbi nec nisl nec sapien ultricies porttitor. Fusce eu pede vitae velit euismod vulputate. Curabitur vehicula, urna non laoreet ornare, odio diam feugiat sem, sit amet lobortis est elit et nunc. Maecenas ut orci vitae quam sodales facilisis. Duis augue lorem, fringilla eget, mollis vel, imperdiet nec, magna. Sed cursus sapien a augue. Maecenas lorem. Morbi porta leo. Phasellus vitae quam. Aliquam erat volutpat. Integer massa nibh, lacinia sed, vulputate sed, bibendum consectetur, nibh. Fusce cursus tempus diam.</p>
 </div>
</div>

dan kode CSS tambahannya adalah

#content{
 margin-left:200px;
}

Hasil penambahan ini dapat dilihat pada contoh 3. Jreng-jreng… akhirnya jadi juga deh tampilan dua kolom yang fleksibel, gak percaya? coba aja browsernya dikecilin trus digedein lagi, terlihat kan bagian isinya menyempit dan melebar menyesuaikan dengan lebar layar browser.
Trus bagaimana dong kalau mau bikin bagian sampingnya di sisi kanan. Gampang aja, tinggal kita ganti untuk #sidebar nilai float kita ganti menjadi float:right, untuk #content-wrapper nilai float kita ganti menjadi float:left, margin-left kita ganti menjadi margin-right dan untuk #content margin-left kita ganti menjadi margin-right. Lengkapnya seperti berikut.

#header {
 background:#c5c5c5;
}
#content-wrapper {
 width:100%;
 float:left;
 margin-right:-200px;
}
#content {
 margin-right:200px;
}
#sidebar {
 width:200px;
 float:right;
 background:#cfcfcf;
}
#footer {
 background:#c5c5c5;
 clear:both;
}

Dan hasilnya dapat dilihat pada contoh 4.

Anda sedang membaca artikel tentang Membuat tampilan dua kolom yang fleksibel dan anda bisa menemukan artikel Membuat tampilan dua kolom yang fleksibel ini dengan url http://wanzbsc.blogspot.com/2011/12/membuat-tampilan-dua-kolom-yang.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat tampilan dua kolom yang fleksibel ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.