widthプロパティは要素の生成するボックスの内容領域の横幅を指定します。適用対象は、非置換インライン要素と表の行・行グループ要素（tr要素, thead要素, tfoot要素, tbody要素）を除いたブロック要素とインラインブロック要素、インライン要素の中で横幅と高さの内在寸法がある置換要素です。
widthプロパティに指定できる値は、それぞれ以下の意味を示します。
em", "px" などの単位識別子を伴う数値で指定（負の値は不正）%）による割合で指定（負の値は不正）auto"auto" を指定した場合、指定された要素によって解釈が異なります。ブロック要素に指定した場合、要素の生成するボックスの横幅は左右いっぱいにまで広がり、もう一方の適用対象である置換要素に指定した場合、img要素は画像のもともとのサイズが横幅となり、その他の input要素, object要素, select要素, textarea要素は UA が決定する内在寸法が横幅となります。
パーセンテージ値が基準値として参照する包含ブロックとは、祖先要素の中でもっとも近い祖先にあたる親要素のブロックボックスの内容領域のことを指します。たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは、html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。この包含ブロックの中で、widthプロパティのパーセンテージ値は横幅を基準値として参照します。
なお、横幅のサイズを固定するのではなく、柔軟に変化できる横幅にしたい場合は、横幅の最小値・最大値を指定する、min-widthプロパティ・max-widthプロパティを使います。また、内容領域の横幅を指定する widthプロパティに対して、内容領域の高さは heightプロパティで指定します。さらに、ボックスの内容領域をはみ出した場合の表示方法については overflowプロパティでコントロールすることができます。
div { width : 300px ; height : 60px ; border : 1px solid gray ; }
div.ie_bug { border : solid orange ; border-width : 1px 75px ; }
ここに用意したサンプルは、Microsoft Internet Explorer に見られるボックスの計算方法のバグを顕著に示したものです。
Windows版InternetExplorer 5.5 以前、及び Windows版Internet Explorer 6・Macintosh版Internet Explorer 5 のバージョンでは、レンダリングモードが後方互換モードの場合に誤った計測が行われ、このサンプルのボックスはどちらも同じ横幅で表示されます。というのは、Windows版InternetExplorer 5.5 以前、及び Windows版Internet Explorer 6・Macintosh版Internet Explorer 5 の後方互換モードでは、ボーダー領域（内容領域+パディング+ボーダー）までを含んだ寸法をボックスの横幅として計測してしまうためです。標準準拠モードであれば、通常通り、heightプロパティは内容領域の横幅のみを反映します。Windows版Internet Explorer 7 では、このバグは改善済みです。
レンダリングモードの切り替わりについては、!DOCTYPE スイッチを参照ください。
http://w3g.jp/css/box/width実績：大阪学院 入試サイト New! / 三田市民病院 / 神戸女学院大学 入試サイト / 釣りサンデー