min-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 No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value No
Inherited No
Applied To all elements except built-in elements and tables
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Description
This argument determines the maximum width of an element. If the browser window reaches the set minimum width of an element, in that case its width remains invariable and there is a horizontal scrolling strip.
Value of element width will be calculated depending on the determined parameters width, max-width and min-width. In tab. 1 it is shown what the browser uses at concurrent use of the specified properties.

Table 1. Element width
Parameters values Width
min-width < width < max-width width
min-width > width > max-width min-width
min-width > width < max-width min-width
min-width < width width
min-width > width min-width
min-width > max-width min-width
min-width < max-width max-width

This table data means following: if width value (width) is less than value min-width the element width is accepted equal to the value min-width.

Syntax

min-width: value

Arguments
Pixels (px) and percent (%) are accepted as values

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
28
29
30

<!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>Columns without hyphens</title>
  <style  type="text/css">
   #container  {
    min-width: 420px; /* Min container's width */
   }
   #col1 {
    background-color: #fc0; /* Column's background color */
    padding: 5px; /* Areas around the text */
    float: left; /* Right edge float */
    width: 150px; /* Left column width */
   }
   #col2  {
    background-color: #c0c0c0; /* Column's background color*/
    padding: 5px; /* Areas around the text */
    width: 250px; /* Right column width */
    float: left; /* Right edge float */
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="col1">Column 1</div>
   <div id="col2">Column 2</div>
  </div>
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.minWidth
Form Creator
Form Builder
PHP Form
Web Forms