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.com" 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.com*/-->
</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.com" 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.com" 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.com*/-->
</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.com" 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.com" 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.com*/-->
</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.com" 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.com" 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.com*/-->
</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.com" 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.com" 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.com*/-->
</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.com" 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

shared to : facebook | twitter

tentang penulis

indamindam

Indam, seorang web designer, wordpress theme development, -
blogger dan penulis yang ingin terus belajar! read more about indam ⇉


Indam on | facebook | twitter

Related post

Berlangganan via FeedBurner

4 Responses to CSS fungsi Property Float serta Valuenya

  1. selly says:
    September 30, 2011 at 3:04 pm

    sepppp,, sangat bermanfaat sekali

    Reply
  2. David says:
    February 2, 2012 at 12:56 am

    qlo float nya ke bawah ad gk ? float:bottom

    Reply
  3. warung belajar says:
    February 8, 2012 at 9:26 pm

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

    Reply

Sorry, formulir komentar sedang dalam perbaikan