CSS

Belajar CSS Part 9: Penggunaan Float CSS

Selamat datang. Salam jumpa kembali di pertemuan yang ke-8 dalam sesi belajar CSS. Pada pertemuan ini kita akan membahas Cara Menggunakan Float CSS.

Floating merupakan kebutuhan yang paling banyak diperlukan untuk web desain. Float berfungsi mengatur letak elemen secara horizontal. Float sendiri memiliki 4 value yang dapat digunakan diantaranya adalah: left, right, inherit & none.

Contoh yang sering ditemukan dalam penggunaan float adalah ketika kita ingin membuat gambar postingan website terletak pada bagian samping tulisan.

Berikut contoh penggunaan float css.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial CSS www.irvannurfazri.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Tutorial Float dengan CSS di <br/> www.irvannurfazri.com</h1>

	<div class="kotak">
		<img class="gambar" src="irvan_gen_logo.png">
		<p>
			Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css. Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di irvannurfazri.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css. cara membuat element berbaris dengan float css. belajar css menggunakan float css.		
		</p>
	</div>
</body>
</html>

style.css

h1{
	text-align: center;
}

.gambar{
	width: 300px;
	float: left;
	margin-right: 10px;
}

Hasilnya…

Float CSS - #irvangen
Float CSS – #irvangen

Coba perhatikan kembali untuk style.css disana saya memberi perintah untuk meletakkan gambar di samping kiri tulisan: float: left;

Untuk lebih lanjut silahkan teman – teman coba sendiri dengan menggunakan value right, inherit none agar bisa melihat langsung perbedaannya.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Penggunaan Float CSS. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

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