max-width(ID lebar maximal) ini hampir sama dengan property width, bedanya fungsi dari max-width hanya mengatur lebar maximal saja.
contoh, coba buat file html dangan code seperti ini
<html>
<head>
<title>css max-width</title>
<meta content=”indam url:http://www.indaam.com” name=”author”/>
<style type=”text/css”>
#bentuk-pertama{float:left;
background-color:red;
height:100px;
max-width:250px;
margin:5px;
}
#bentuk-kedua{
float:left;
background-color:red;
height:100px;
max-width:250px;
margin:5px;
}
#bentuk-ketiga{
float:left;
background-color:red;
height:100px;
max-width:250px;
margin:5px;
}
#bentuk-keempat{float:left;
background-color:red;
height:100px;
max-width:250px;
margin:5px;
}
#bentuk-kelima{
float:left;
background-color:red;
height:100px;
max-width:250px;
margin:5px;
}
#bentuk-keenam{
float:left;
background-color:red;
height:100px;
max-width:250px;
margin:5px;
}
</style>
</head>
<body>
<div id=”bentuk-pertama”>ben</div>
<div id=”bentuk-kedua”>bentu</div>
<div id=”bentuk-ketiga”>bentuk</div>
<div style=”clear:both;/**/”></div>
<div id=”bentuk-keempat”>bentukin</div>
<div id=”bentuk-kelima”>bentukiniad</div>
<div id=”bentuk-keenam”>bentukiniadalahcontomax-width</div>
<div style=”clear:both;/**/”></div>
<p>salam <a href=”http://www.indaam.com” title=”indam site” target=”_blank”>indaam site</a></p>
</body>
</html>
cara menjalankan
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohcssmax-width.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
keterangan
- edit filenya, lalu
- cari ben, betu, bentuk, bentukin, bentukiniad, bentukiniadalahcontohmax-width
- kemudian ganti dengan text yang lebih panjang
- nanti, sobat akan tahu sendiri apa fungsi max-width
- valuenya sama dengan min-width(post sebelumnya)
- selamat belajar
References
http://www.w3.org/Style/CSS
