Membuat layout 2 kolom CSS

Berikut ini adalah tutorial tentang cara menggunakan CSS untuk membuat layout dua kolom sederhana, layout ini terdiri dari sebuah header, sebuah navigasi horizontal, kolom konten utama, sidebar, dan footer.

Struktur dasar

<div id="wrapper">
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="main"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
</div>

Setelah itu, coba isi beberapa konten pada tiap bagian

<div id="wrapper">
    <div id="header"><h1>Heading</h1></div>
    <div id="navigation">
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        ...
    </ul>
    </div>
    <div id="main">
        <h2>Column 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
    </div>
    <div id="sidebar">
        <h2>Column 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            ...
        </ul>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
</div>

Sekarang kita telah menyelesaikan dokumen htmlnya, selanjutnya gunakan CSS untuk mengatur tata letaknya

Mengatur elemen body dan html

Untuk membuat konten mencapai tepi jendela browser, kita harus menetapkan margin dan padding dari elemen body dan html ke nol.

body,
html {
    margin:0;
    padding:0;
    color:#000;
    background:#dadada;
}

Membuat halaman page di tengah

Selanjutnya, kita perlu menspesifikasikan lebar dan margin dari #wrapper, metode untuk membuat konten di tengah yaitu dengan mengatur margin kiri dan margin kanan menjadi auto.

#wrapper {
    width:760px;
    margin:0 auto;
    background:#FAFAD2;
}

2 Kolom

Untuk membuat 2 kolom (#main dan #sidebar), kita gunakan float untuk mengatur tata letaknya, dan tentukan lebar kolom dari elemen-elemennya

#main {
    float:left;
    width:490px;
    background:#90EE90;
    padding:10px;
}

#sidebar {
    float:right;
    width:230px;
    background:#FAFAD2;
    padding:10px;
}

Membuat navigasi horizontal

navigation terbentuk dengan unordered list, agar tidak terlihat seperti daftar list, kita harus sedikit merombaknya

#navigation ul {
    margin:0;
    padding:0;
    list-style:none;
}

#navigation li {
    display:inline;
    margin:0;
    padding:0;
}

Hasil akhir

hasil akhir dari css nya akan terlihat seperti ini :

body,
html {
    margin:0;
    padding:0;
    color:#000;
    background:#dadada;
}

#header {
    padding:5px 10px;
    background:#20B2AA;
}

#wrapper {
    width:760px;
    margin:0 auto;
    background:#FAFAD2;
}

#main {
    float:left;
    width:490px;
    background:#90EE90;
    padding:10px;
}

#sidebar {
    float:right;
    width:230px;
    background:#FAFAD2;
    padding:10px;
}

#footer {
    clear:both;
    background:#D8BFD8;
    padding:5px 10px;
}

#navigation {
    padding:5px 10px;
    background:#40E0D0;
}

#navigation ul {
    margin:0;
    padding:0;
    list-style:none;
}

#navigation li {
    display:inline;
    margin:0;
    padding:0;
}

Contoh diatas merupakan contoh sederhana untuk membuat layout dengan 2 kolom, selanjutnya bisa dikembangkan lagi untuk layout yang lebih baik

Alfa Adhitya Member since December 18, 2019

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter – Eric S