Mengatasi Ukuran Layout Website dengan Properties Box-Sizing:Border-Box CSS3

Hai teman-teman, kembali lagi pada tutorial dumet school, pada tutorial kali ini saya akan memberikan sedikit penjelasan dan fungsi properties box-sizing:border-box yang ada pada css3, sebelumnya apa sih fungsi itu box-sizing?

Mungkin teman-teman yang sudah terjun di dunia desain web sudah familiar dengan properties yang satu ini, properties  yang satu ini sangat membatu dalam pengerjaan website yang kita buat karena properties ini cukup membantu untuk menghilangkan pusing teman-teman dalam melakukan pengaturan ukuran di setiap konten website.

Contoh kasusnya misal kita memiliki layout dengan lebar 900px, lalu kita membaginya menjadi 2 kolom, kiri sebesar 300px dan kanan sebesar 600px, lalu setelah kita bagi ternyata ukurannya tidak cukup dikarenakan kita menggunakan padding dan margin didalamnya, terpaksa harus menghitung ulang kembali ukuran beserta padding dan marginnya, ini kendala yang sering sekali di alami murid di dumet school.

Solusinya sangat mudah teman-teman, cukup menambahkan properties box-sizing:border-box pada script cssnya, dengan kita menggunakan properties ini kita tidak lagi harus mengurangi ukuran lebar atau tinggi ketika kita menggunakan padding di dalamnya.

Code scriptnya adalah sebagai berikut :

.pembungkus{
		width:900px;
		overflow:hidden;
		background:#f4f4f4;
		margin:20px;
	}
	.kiri{
		float:left;
		width:300px;
		height:200px;
		background:blue;
		border:10px solid #000;
		padding:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}
	.kanan{
		float:left;
		width:600px;
		height:200px;
		background:red;
		border:10px solid #f20000;
		padding:10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
	}

Coba perhatikan script diatas saya membagi kontennya pas-pasan 300px dan 600px dengan padding dan border didalamnya, dan kita tidak harus mengurangi ukurannya dikarenakan kita menambahkan fitur box-sizing ini.

Oke cukup mudah kan teman-teman, silahkan praktekan sendiri dirumah, cukup sekian artikel kali ini, semoga bermanfaat.

Terimakasih.