Frontend : CSS Bagian 11 – Floating Object

Sama seperti Positioning Object, perbedaan nya terdapat di letak posisi elemen. Jika Positioning object dapat diletakkan dimana saja, float lebih dikhususkan untuk diletakkan pada posisi kanan atau kiri. Cukup dengan property float, teman-teman bisa merubah letak elemen ke kanan atau ke kiri. Materi ini cukup singkat teman-teman. Yuk langsung saja kita coding…

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 11 - Floating Object</title>
	<style>
	    .float-right {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin: 25px;
	      text-align: center;
	      background-color: cyan;
	      float: right;
	    }
	    .float-left {
	      width: 250px;
	      height: 50px;
	      padding: 20px;
	      border: 3px solid black;
	      margin-top: 25px;
	      text-align: center;
	      background-color: cyan;
	      float: left;
	    }
	  </style>
</head>
<body>
	<div class="float-left">
		<p>Float Left</p>
	</div>
	<div class="float-right">
		<p>Float Right</p>
	</div>
</body>
</html>


Hasil :

Leave a Reply

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