Tutorial Web Design

Hallo web designer, kali ini tutorial-webdesign.com akan membahas tentang fitur box-sizing yang merupakan salah satu fitur bawaan css3. Semoga ada pelajaran yang bisa diambil dari tulisan tentang box-sizing ini.

Fitur ini cukup berguna karena sedikit menghilangkan pusing yang biasa timbul ketika kita sedang membuat layout web. Dimana biasanya kita menentukan lebar layout yang kita inginkan terlebih dahulu, setelah itu menentukan lebar sidebar dan conten web.

Misal lebar layout yaitu 800px. Kita membaginya menjadi 2 kolom, kiri dan kanan, kiri 200px dan kanan 600px. Setelah dibuat ternyata lebar 800px tidak cukup karena kita membutukan padding dan border. Arg…..Terpaksa harus menghitung ulang dengan mempertimbangkan berapa padding dan berapa border.

Box dimensions

Wah repot ya, nah bagaimana jika kita ingin membuat lebar atau tinggi sebuah element html seperti div memiliki lebar dan tinggi sesuai dengan yang kita inginkan? Solusinya bisa menggunakan fitur Box-Sizing yang ada di css3.

Sebaiknya langsung saja kita melihat contoh penggunaan box-sizing

DEMO DOWNLOAD

Cukup tambahkan code box-sizing: border-box; untuk membuat elemen yang lebarnya sesuai dengan yang kita inginkan. Untuk dapat berjalan diberbagai browser gunakan prefix masing-masing browser.

.container{
		width:700px;
		overflow:hidden;
		background:#f4f4f4;
		margin:20px;
	}
	.box{
		float:left;
		width:200px;
		height:200px;
		background:yellow;
		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;
	}
	.box2{
		float:left;
		width:500px;
		height:200px;
		background:orange;
		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;
	}

Sekian, Salam web design Indonesia.

Ref:
http://www.w3.org/TR/CSS2/box.html
http://www.w3.org/TR/css3-box/