Melakukan Manipulasi Layout dengan CSS Float

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

 

21 September 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat