Didats Triadi

Saya jadi ingat, karena baru kenal dengan teknik melayout dengan CSS,
jadi, informasi dan pengetahuan saya masih sangat minim sekali. Dan saat itu,
rasanya sangat tak enak sekali dan agak sulit jika memang belum mengetahui “sela”
atau ilmunya.

Sedikit saya mau berbagi teknik ini, yang juga bisa didapat dari sini. Pengembangan yang saya lakukan, bagaimana 2 kolom yang nanti dibuat terlihat sejajar sampai bawah. Berikut gambar yang saya ambil langsung dari sana.

Pada gambar pertama, terdapat 3 buah kotak. Kotak pertama, yang menampung 2 buah kotak didalamnya, nantinya diasumsikan sebagai sidebar dan content. Penggunaan float:right pada sidebar dan content yang tidak di float, akan mengakibatkan, kotak besar yang menampung, mengikuti tinggi dari kotak content. Jika ternyata sidebar lebih tinggi dari content, maka akan berakibat seperti gambar dibawah ini.

Pada gambar kedua, juga terdapat 3 buah kotak. Perbedaan dengan gambar pertama, adalah, kedua kotak, yaitu content dan sidebar dibuat float. Yang terjadi, dan yang sering saya alami dulu, kotak besar yang menampung 2 kotak didalamnya, tak akan mengikuti tinggi salah satu kotak didalamnya.

Solusi dari gambar kedua, adalah membuat satu kotak lagi, tepat dibawah kedua kotak tersebut, misalkan kita asumsikan sebagai kotak bottom. Maka, yang kita lakukan terhadap kotak bottom itu adalah sebagai berikut:

#bottom { clear:both; }

Penggunaan kata kunci clear akan membuat kotak besar akan mengikuti tinggi dari kotak bottom. Dan ini berarti, anda sudah tak perlu memikirkan dan terlalu pusing untuk menentukan kotak mana yang lebih tinggi.

Tutorial sumber hanya sampai disini. Tapi, saya akan coba mengembangkannya, yaitu bagaimana antara kotak sidebar dan kotak content terlihat sama tinggi. Dan kita akan coba membahasnya dilain waktu… :P