Дек
10

Internet Explorer: max-width без javascript и expressions

Предлагаю вам способ эмуляции max-width в IE6 на чистом CSS. Данный способ работает во всех современных браузерах без использования max-width, JavaScript или Microsoft expressions.

Приведу разметку и таблицу стилей для эмуляции max-width: 900px; Если что-то будет не понятно, задавайте вопросы в комментах.

HTML:


<body>
    <div class="leftpad"></div>
    <div class="rightpad"></div>
    <div class="content">
        <div class="inner">Здесь контент</div>
    </div>
</body>

CSS:


.leftpad {
	float:left;
	height:10px;
	width:50%;
	margin-right:-450px;
}
.rightpad {
	float:right;
	height:10px;
	width:50%;
	margin-left:-450px;
}
.content {
	padding:10px;
	border:1px solid #000;
	overflow:hidden;
	height: 100%;
}
* html .content {
	float:left;
}
* html .inner {
	overflow:hidden;
	width:100%;
	height: 100%;
}

Связанные материалы

  1. Трехпиксельный баг Internet Explorer
  2. Эмуляция position: fixed в Internet Explorer 6
  3. Центрирование меню

← 
 →

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • Андрей

    Спасибо за урок. Использую у себя

  • Андрей

    В 16 строке overflow:hidden; — не позволяет контенту отображаться на странице в случае, когда высота страницы больше окна экрана. Предложенный вариант подходит только для случая, когда высота страницы заведомо меньше высоты экрана