width

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value auto
Inherited No
Applied To all elements except built-in unreplacable elements, columns and table groups
HTML analog <im width> <table width>
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-width

Description
Sets the width of block or replacable elements (the tag <IMG> refers to them). Width doesn't include the width of borders around the elements, values of indents and fields.
Browsers work with width in different ways. The result of image depends on DOCTYPE used.

Syntax

width: value | percents | auto

Arguments
Any CSS units of length are accepted as values - for example, pixels (px), inches (in), points (pt) etc. When you use the percent record the element's width is calculated depend on parent element's width. If the parent is not specified directly the browser window becomes a parent. The argument "auto" sets the width depend on type and content of the element.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>width</title>
  <style type="text/css">
   .layer1 {
    width: 300px; /* Block width */
    background: #fc0; /* Background color */
    padding: 7px; /* Fields around the text */
    border: 1px solid #ccc; /* Frame parameters */
   }
   .layer2 {
    width: 400px; /* Text block width */
   }
  </style>
 </head>
 <body>
 
  <div class="layer1">
   <p class="layer2">Lorem ipsum dolor sit amet,consectetuer 
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut 
   lacreet dolore magna aliguam erat volutpat.</p>
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.width