min-width

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.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) и проценты (%).

Пример

Валидный HTML
Валидный CSS

<!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