min-width

Браузер	Internet Explorer			Netscape		Opera			Safari		Mozilla	Firefox
Версия	5.5	6.0	7.0	7.0	8.0	7.0	8.0	9.0	2.0	3.0	1.7	1.0	2.0	3.0
Поддерживается	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Краткая информация

CSS	CSS2
Значение по умолчанию	Нет
Наследуется	Нет
Применяется	Ко всем элементам, кроме встроенных и таблиц
Аналог HTML	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width

Описание

Устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.

Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных свойств.

Табл. 1. Ширина элемента
Значения параметров					Ширина
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

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Синтаксис

min-width: значение

Аргументы

В качестве значений принимаются пикселы (px) и проценты (%).

Пример

<!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>Колонки без переносов</title>
<style type="text/css">
#container {
?min-width: 420px; /* Минимальная ширина контейнера */
}
#col1 {
?background-color: #fc0; /* Цвет фона колонки */
?padding: 5px; /* Поля вокруг текста */
?float: left; /* Обтекание по правому краю */
?width: 150px; /* Ширина левой колонки */
}
#col2 {
?background-color: #c0c0c0; /* Цвет фона колонки */
?padding: 5px; /* Поля вокруг текста */
?width: 250px; /* Ширина правой колонки */
?float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div id="container">
?<div id="col1">Колонка 1</div>
?<div id="col2">Колонка 2</div>
</div>
</body>
</html>

Результат данного примера, как он отображается в браузере Opera, показан на рис. 1. Internet Explorer 6 не поддерживает свойство min-width, поэтому страница будет выглядеть иначе (рис. 2).

Рис. 1

Рис. 1. Результат использования min-width в браузере Opera

Рис. 2

Рис. 2. Результат использования min-width в браузере Internet Explorer 6

Объектная модель

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