Melakukan Manipulasi Layout dengan CSS Float

21/09/2018    Maykhel David    1104     Website

Melakukan Manipulasi Layout dengan CSS Float - Pernahkah kalian membuat sebuah website dengan gaya dua kolom atau dengan konten sejajar horizontal? Untuk mengelola konten tersebut kita bisa menggunakan salah satu fitur css, yaitu float.
Pada atribut float terdapat tiga value, yaitu

1. float:none
2. float:left
3. float:right

Sifat dari atribut float sendiri adalah menarik sebuah elemen ke kiri atau juga bisa ke kanan, dan membuat elemen dibawahnya berpindah ke sebelahnya ketika tersedia ruang kosong.
Contoh saya punya struktur html seperti berikut

<div class="container">
    <div class="left">
        <h1>Left</h1>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div class="right">
        <h1>Right</h1>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>
<h3>Ini Footer</h3>

Lalu dengan css seperti berikut

.container{
    width: 800px;
    margin: auto;
}
.left{
    float: left;
    width:300px;
}
.right{
    float: right;
    width:300px;
}

Maka hasilnya akan memperlihatkan bahwa tulisan ini footer menjadi naik ke atas karena terdapat ruang kosong diantara class left dan right
 
Bagaimana cara agar bagian footer tidak naik ke atas?
Caranya cukup mudah, kita bisa gunakan tiga cara,
1. Gunakan height, dengan menggunakan height kita harus memberikan atau menentukan tinggi dari konten tersebut, sehingga cara ini tidak direkomendasikan untuk konten yang cukup banyak.
2. Gunakan overflow yang bisa kalian simak pada artikel saya yang berjudul Mengenal Lebih Jauh Property Overflow pada CSS
3. Gunakan clear, property clear ini berfungsi untuk menghilangkan efek yang ditimbulkan dari attribute float kepada elemen dibawahnya. Sehingga atribut ini paling cocok untuk digunakan pada elemen yang terganggu saat kita berikan float.
Baiklah teman – teman, dari penjelasan diatas kita bisa mengerti tentang cara memanipulasi layout pada HTML, dan tidak lagi bingung ketika ada elemen html yang tidak sengaja berpindah tempat. Demikian artikel kali ini yang membahas tentang memanipulasi elemen html dengan float. Semoga bermanfaat

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More