CSS fungsi Property Float serta Valuenya

ok, gini bayangkan sebuah website tiga kolom, sudah!? nah agar website tadi dapat terbentuk menjadi tiga atau bahkan seratus kolom, kita wajib menambahkan property float!

Bukan masalah-masalahmu yang mengganggumu, tetapi cara Anda memandang masalah-masalah itu. Semuanya bergantung pada cara Anda memandang sesuatu . Epictetus

ok, gini bayangkan sebuah website tiga kolom, sudah!? nah agar website tadi dapat terbentuk menjadi tiga atau bahkan seratus kolom, kita wajib menambahkan property float!

Last Modif at July 10th, 2011

css lagi css lagi dan css lagi, semoga sobat ngga jenuh dengan css!

dari beberapa web language yang saya kenal, yang paling paling saya suka adalah css, lalu htmldom, kemudian dinamichtml. yah, ketiga bahasa tadi fungsinya untuk mendesign web sehingga tampilanya lebih ok, sebenarnya masih ada jquery hanya saja saya ngga suka jquery, why! jquery itu = js+htmldom+dinamichtml+ajax jadi kalau bisa js, htmldom, dhtml, ajax. buat apa pakai jquery(kita kan bisa buat scriptnya sendiri)! hihihi, jquery itu adalah gabungan fungsi-fungsi javascript yang dikembangkan oleh john resig(kalau ngga salah) aaaaaaaaaaaaaaaaaaaa saya males ngebahas jquery karena ngga pernah nyoba :)

intinya saya ngga suka jquery dan saya sampai detik ini ngga pernah pakai jquery. mungkin nanti.

jadi kalimat-kalimat diatas ngga usah diresapin anggap saja sebagai rasa kecewa saya terhadap seseorang!

terlepas dari itu saya sangat menyarankan agar agan-agan semua pelajarin jquery

back to topick “css property float”

float(EN = mengapung ) adalah salah satu property dalam css, menurut saya fungsi float adalah membuat suatu bidang(anggap saja sidebar-kiri-kanan) yang sejajar! bingung?

ok, gini bayangkan sebuah website tiga kolom, sudah!? nah agar website tadi dapat terbentuk menjadi tiga atau bahkan seratus kolom, kita wajib menambahkan property float!

bagaimana cara kerjanya?

dengan property float ini, bidang_box(anggap sidebar-kiri-kanan) yang kita buat akan mencari area kosong kemudian menekan ke atas lalu mengisinya!

logika!

anggap

  • tag body lebarnya 1000px
  • sidebar-kiri lebarnya 200px
  • sidebar tengah lebarnya 300px
  • sidebar kanan lebarnya 500px

dengan demikian akan terbentuk sebuah website dengan tiga kolom

logika “dan jika”

anggap

  • tag body lebarnya 1000px
  • sidebar-kiri lebarnya 300px
  • sidebar tengah lebarnya 300px
  • sidebar kanan lebarnya 500px

dengan demikian akan terbentuk website dengan dua kolom! kok dua kolom!? yups, ini karena sidebar-kanan tidak menemukan area kosong yang cukup! 1000-300-300= sisanya 400, sedangkan sidebar kanan 500px.(ngga cukup kan!). lalu sidebar-kananya kemana? hihihi (ini yang sering di perbincangkan) kok sidebar saya lari kebawah?

float:left dan float:right ini ngga ngaruh terhadap turunya sidebar, juga penting untuk diketahui float dan clear ini hampir ngga bisa disatukan!

nanti akan saya bahas property clear

value float

sampai dengan css3 hanya ada 4 yaitu

  • right
  • left
  • none
  • inherit

flaoat:right

seperti yang saya katakan diatas fungsi float adalah menekan bidang keatas, maksud dari float right ialah menekan ke atas kanan

float:left

seperti yang saya katakan diatas fungsi float adalah menekan bidang keatas, sedangkan maksud dari float left ialah menekan ke atas kiri

float:none

ini adalah nilai defaultnya, jadi jika sobat tambahkan float none sama saja dengan ngga usah ditulis

float:inherit

fungsi falue ini adalah mengikuti nilai(value) bidang sebelumnya

contoh float dalam inline style

sepertynya percuma, karena fungsi float adalah membentuk bidang-bidang website, sedangkan css dalam inline style(sudah tahu kan)!

contoh float dalam internal style

1.markup style pertama “dua kolom”

contoh markup style dua kolom dengan float

<html>
<head>
<title>contoh css float 2 kolom</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
<!--
body{background-color:pink;
width:1000px;
margin:auto;}
h2{padding-left:10px;}
#sidebar-kiri{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:400px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar-kanan{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:500px;/* lebar */
margin:5px;
background-color:white;
}
/*salam www.indaam.net*/-->
</style>
</head>
<body>
<div id="sidebar-kiri">
<h2>sidebar kiri</h2>
</div>
<div id="sidebar-kanan">
<h2>sidebar kanan</h2>
</div>
<div style="clear:both;/* */"></div>
<p>yah, seperti inilah tampilanya, simple kan?, silakan edit untuk belajar. salam
<a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contocsshfloat1.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • bermanuverlah dengan valuenya, pelajari dan pahami
  • selamat belajar

2.markup style kedua “tiga kolom”

contoh markup style

<html>
<head>
<title>contoh css float 3 kolom</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
<!--
body{background-color:pink;
width:1000px;
margin:auto;}
h2{padding-left:10px;}
#sidebar-kiri{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:300px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar-tengah-atau-badan{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:350px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar-kanan{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:300px;/* lebar */
margin:5px;
background-color:white;
}
/*salam www.indaam.net*/-->
</style>
</head>
<body>
<div id="sidebar-kiri">
<h2>sidebar kiri</h2>
</div>
<div id="sidebar-tengah-atau-badan">
<h2>sidebar tengah</h2>
</div>
<div id="sidebar-kanan">
<h2>sidebar kanan</h2>
</div>
<div style="clear:both;/* */"></div>
<p>yah, seperti inilah tampilanya, simple kan?, silakan edit untuk belajar. salam
<a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contocsshfloat2.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • bermanuverlah dengan valuenya, pelajari dan pahami
  • selamat belajar

3.markup style ketiga “empat kolom”


contoh markup style

<html>
<head>
<title>contoh css float 4 kolom</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
<!--
body{background-color:pink;
width:1300px;
margin:auto;}
h2{padding-left:10px;}
#sidebar1{
min-height:500px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:300px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar2{
min-height:500px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:350px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar3{
min-height:500px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:300px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar4{
min-height:500px;/* tinggi minimal*/
float:right;/* menekan ke kanan*/
width:300px;/* lebar */
margin:5px;
background-color:white;
}
/*salam www.indaam.net*/-->
</style>
</head>
<body>
<div id="sidebar1">
<h2>sidebar1</h2>
</div>
<div id="sidebar2">
<h2>sidebar2</h2>
</div>
<div id="sidebar3">
<h2>sidebar3</h2>
</div>
<div id="sidebar4">
<h2>sidebar4</h2>
</div>
<div style="clear:both;/* */"></div>
<p>yah, seperti inilah tampilanya, simple kan?, silakan edit untuk belajar. salam
<a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contocsshfloat3.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • bermanuverlah dengan valuenya, pelajari dan pahami
  • selamat belajar

4.markup style keempat “6 kolom”

contoh markup style

<html>
<head>
<title>contoh css float 6 kolom</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
<!--
body{background-color:pink;
width:1300px;
margin:auto;}
h2{padding-left:10px;}
#sidebar1,#sidebar2,#sidebar3,#sidebar4,#sidebar5,#sidebar6{/*ini adalah teknik penulisan css grouping*/
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:200px;/* lebar */
margin:5px;
background-color:white;
}
/*salam www.indaam.net*/-->
</style>
</head>
<body>
<div id="sidebar1">
<h2>sidebar1</h2>
</div>
<div id="sidebar2">
<h2>sidebar2</h2>
</div>
<div id="sidebar3">
<h2>sidebar3</h2>
</div>
<div id="sidebar4">
<h2>sidebar4</h2>
</div>
<div id="sidebar5">
<h2>sidebar5</h2>
</div>
<div id="sidebar6">
<h2>sidebar6</h2>
</div>
<div style="clear:both;/* */"></div>
<p>yah, seperti inilah tampilanya, simple kan?, silakan edit untuk belajar. salam
<a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contocsshfloat4.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • bermanuverlah dengan valuenya, pelajari dan pahami
  • selamat belajar

5.markup style keempat “10 kolom”

contoh markup style

<html>
<head>
<title>contoh css float 10 kolom</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
<!--
body{background-color:pink;
width:2450px;
margin:auto;}
h2{padding-left:10px;}
#sidebar1{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:200px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar2{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:210px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar3{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:220px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar4{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar5{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar6{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar7{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar8{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar9{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar10{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:230px;/* lebar */
margin:5px;
background-color:white;
}
/*salam www.indaam.net*/-->
</style>
</head>
<body>
<div id="sidebar1">
<h2>sidebar1</h2>
</div>
<div id="sidebar2">
<h2>sidebar2</h2>
</div>
<div id="sidebar3">
<h2>sidebar3</h2>
</div>
<div id="sidebar4">
<h2>sidebar4</h2>
</div>
<div id="sidebar5">
<h2>sidebar5</h2>
</div>
<div id="sidebar6">
<h2>sidebar6</h2>
</div>
<div id="sidebar7">
<h2>sidebar7</h2>
</div>
<div id="sidebar8">
<h2>sidebar8</h2>
</div>
<div id="sidebar9">
<h2>sidebar9</h2>
</div>
<div id="sidebar10">
<h2>sidebar10</h2>
</div>
<div style="clear:both;/* */"></div>
<p>yah, seperti inilah tampilanya, simple kan?, silakan edit untuk belajar. salam
<a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

untuk melihat hasilnya

  • copy markup style diatas
  • paste ke notepad
  • save as (pilih all types) dengan nama contocsshfloat5.htm
  • jalankan(double click), atau
  • open with (firefox, ie, opera, safari, chrome)
  • silakan edit valuenya
  • letak valuenya antara : (titik dua) dan ;(titik koma)
  • bermanuverlah dengan valuenya, pelajari dan pahami
  • selamat belajar

betapa indahnya jika ilmu yang kita miliki bermanfaat untuk orang lain!
References

http://www.w3.org/Style/CSS

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

10 thoughts on “CSS fungsi Property Float serta Valuenya”

  1. selly says:

    sepppp,, sangat bermanfaat sekali

  2. David says:

    qlo float nya ke bawah ad gk ? float:bottom

    1. indam says:

      float dangan value bottom ngga ada…

  3. bermanfaat sekali gan , soalnya lagi belajar konsep dari si float , terima kasih agan :D

  4. buffet says:

    ikut nyimak ya gan,.. sambil sy praktekkan

  5. Siip Gan Sangat Sangat Jelas

  6. AndRah says:

    Wah mantabp gan,,
    tapi sayangx otak ane yg ga mantabp, malah pusing ngarti’inx . . heu’heu,, maklum masih pemula nih gan . . .
    jadi nyimak aja,.,.,

  7. abdulazis says:

    terima kasih banget gan….semoga ilmunya bermanfaat dan membawa berkah dalam hidup agan
    izin save di compy

  8. zeifhend says:

    nyaris gak ngerti bos… hadeh…

  9. dewa says:

    penjelasaannya cukup detail…trims ya gan..atas sharing ilmunya yang tak prnah habis2nya….have a nice day

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-