#CSS - #CSS Dasar

Belajar CSS Part 11 : Menggunakan Float CSS

By Diki Alfarabi Hadi
1 January 2016
CSS CSS Dasar

Belajar CSS Menggunakan Float CSS

Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling banyak di perlukan. float berfungsi untuk mengatur letak element secara horizontal. ada empat value yang bisa di gunakan untuk property float, yaitu left, right, inherit dan none.

salah satu contoh penggunaan float yang paling sering di temukan adalah ketika kita ingin mebuat gaambar postigan website yang terletak di bagian samping tulisan konten. berikut akan diberikan contoh tentang penggunaan float pada CSS.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Border style CSS www.malasngoding.com</title>

</head>

<body>

<h1>Tutorial Float dengan CSS di <br/> www.malasngoding.com</h1>

<p>

Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.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 malasngoding.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 malasngoding.com. tutorial belajar css tentang penggunaan float di css. cara menggunakan float di css.belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.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 malasngoding.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. cara membuat element berbaris dengan float css. belajar css menggunakan float css.Belajar tutorial pemrograman web, mobile dan download sourcecode di malasngoding.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 malasngoding.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 malasngoding.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 malasngoding.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 malasngoding.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 malasngoding.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;

}

cara menggunakan float css

perhatikan pada contoh di atas. kita meletakkan float:left pada element gambar sehingga gambar di letakkan ke samping dan text akan menjorok mengikuti element gambar.

untuk lebih lanjut anda bisa mencoba menggunakan float:right dan inherit untuk melihat perbedaan dari masing-masing value property float CSS.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.