Вёрстка слоями. Фиксированный дизайн

SRGB · March 3, 2009

Пытался применить следующие рекомендации

http://htmlbook.ru/content/?id=97

Собственно столкнулся с небольшими расхождениями в отображении высоты контейнера

IE изменяет высоту блока по обеим колонкам а Mozilla только по правой. Я что то напутал или как с этим бороться?

пример моего кода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Две колонки</title>

#container {

width: 500px; /* Общая ширина колонок */

background: #fc0;

}

#leftcol { /* Левая колонка*/

width: 200px; /* Ширина слоя */

float: left; /* Состыковка с соседним слоем */

color: white; /* Цвет текста*/

background: #008000; /* Цвет фона левой колонки */

}

#rightcol { /* Правая колонка*/

width: 200px;

background: #e0e0e0; /* Цвет фона правой колонки */

margin-left: 200px; /* Отступ слева */

}

p {

padding: 10px; /* Поля вокруг текста */

margin: 0; /* Убираем отступы */

}

</style>

</head>

<body>

</div>

</body>

</html>

Vlad · March 4, 2009

Ух ты, прямо показательный пример получился... багов IE6. Тут и трехпиксельный баг и неправильное использование float.

Замени стиль на следующий

#container {
width: 500px; /* Общая ширина колонок */
}

#leftcol { /* Левая колонка*/
width: 200px; /* Ширина слоя */
float: left; /* Состыковка с соседним слоем */
color: white; /* Цвет текста*/
background: #008000; /* Цвет фона левой колонки */
}

#rightcol { /* Правая колонка*/
background: #e0e0e0; /* Цвет фона правой колонки */
margin-left: 200px; /* Отступ слева */
}

SRGB · March 4, 2009

Заменил но проблема осталась. в ИЕ контейнер увеличивает высоту соответственно описания дива, по максимальной высоте содержимого любой из двух колонок.

Файрфокс почему то увеличивает глубину контейнера только на глубину правого блока, в то время как высота левого блока на общий контейнер никакого влияний не оказывает.

Хотелось бы как то унифицировать код, или я чего не понимаю или задача без применения таблиц не решается?

Edited March 4, 2009 by SRGB

Vlad · March 4, 2009

Если нужны колонки одной высоты, то приведенный метод не поможет, надо по другому действовать.

SRGB · March 4, 2009

Если нужны колонки одной высоты, то приведенный метод не поможет, надо по другому действовать.

Нужно сделать так что бы высота главного контейнера увеличивалась в зависимости от максимальной высоты блоков, в обоих браузерах. Пока получается только в ИЕ а файр фокс упорно не хочет увеличивать высоту контейнера по высоте левого блока ((

Searcher · March 4, 2009

добавьте в #container свойство overflow:hidden; и будет вам счастье

SRGB · March 4, 2009

добавьте в #container свойство overflow:hidden; и будет вам счастье

Спасибо :-) Возникли некоторые другие "блохи", но видимо такова "СеЛяВи"

Sign In

Вёрстка слоями. Фиксированный дизайн

Question

SRGB

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

SRGB

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

SRGB

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

SRGB

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information