√ Kesalahan Pada Ketika Floating

 Ada satu permasalahan ketika anda menambahkan floating pada suatu elemen, permasalahan ini sanggup anda temui pada pola kasus berikut.

Buatlah markup HTML menyerupai berikut :

<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="artikel"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>

Lalu berilah style berikut :

#wrapper{
width : 960px;
margin : 0 auto; /*agar wrapper tetap berada ditengah */
}
#header {
width:100%;
height:50px;
background: orange;
margin-bottom: 10px;
}
#content{
padding:20px;
background : green;
margin-bottom : 10px;
}
#artikel{
width : 600px;
height : 700px;
float : left;
background: orange;
}
#sidebar {
width : 300px;
height: 200px;
float : right;
background: orange;
}
#footer{
width : 100%;
height: 50px;

background: green;
}

atau isyarat lengkapnya sanggup di lihat menyerupai berikut:

Jika anda buka dalam browser, maka tampilan yang akan sanggup yaitu menyerupai ini.

Ada yang janggal? Ya.. #content tidak memenuhi isi dari #artikel dan #sidebar. Seharusnya tinggi #content otomatis sama dengan tinggi dari elemen tertinggi di dalamnya, dalam kasus ini yaitu artikel dengan tinggi 700px. Dengan begitu seharusnya tinggi dari #content yaitu 740px (ditambah dengan padding-top dan padding-bottom). Jika anda tidak mengerti cobalah untuk membuang property float yang ada, dan perhatikan bahwa #artikel dan #sidebar berada di dalam #content.

Hal ini dikarenakan kita menambahkan floating pada #artikel dan #sidebar, sehingga #contentmenganggap tidak ada element didalamnya. 

Ada dua cara untuk menuntaskan kasus ini :

1. Menambahkan style overflow:hidden pada #content

#content{ … overflow:hidden; }

2. Menambahkan div kosong dengan style clear:both; sebelum epilog content

… <div id="sidebar"></div>
<div style="clear:both;"></div>
</div>

Untuk lebih mudahnya sebaiknya anda memlilih cara pertama, yakni menambahkan overflow:hideen; pada #content

berikut hasil nya sesudah menambahkan Overflow:hidden;

Note:Float berarti melayang. Ketika kita memperlihatkan float pada elemen maka elemen tersebut seperti melayang dan elemen di atasnya (parent) menganggap tidak ada elemen didalamnya (child).

Nah Bagaimana…? apakah kini kau sudah mengerti apa Permasalahan pada Floating dan cara menuntaskan problem floating? Mungkin itu saja goresan pena yang membahas perihal Permasalahan pada Floating dan cara menuntaskan problem floating, kalau terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja kalau terdapat kesalahan. Kalau memang goresan pena ini bermanfaat tidak ada salahnya kalau men-Sharenya kepada sobat kau yang lain, sekian dan terimakasih.

Share this post