Сегодня в процессе верстальных боев с браузерами я столкнулся с такой непонятной проблемой: если в растянутом на 100% по вертикали div`е расположить другой div с указанными вертикальными margin`ами, то эти отступы почему-то влияют на родительский div (он сползает вниз).
Каюсь, использовал широкоизвестный, но при этом не очень правильный прием для растягивания div`а по вертикали. Но не думаю, что это именно он так повлиял на поведение «правильных» браузеров.
Кстати, «неправильные» ИЕ5.5, ИЕ6, и ИЕ7 показывают всё именно так, как мне хотелось :)
И, что самое смешное, в «правильных» браузерах всё встаёт на свои места при назначении border`а на родительский div.
Вот код примера:
Пример с включением/выключением границ родительского div`а можно посмотреть тут: e1.nnov.ru/strange.html
UPD: вот статья, где понятным русским языком объяснены все эти странности: softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins
Каюсь, использовал широкоизвестный, но при этом не очень правильный прием для растягивания div`а по вертикали. Но не думаю, что это именно он так повлиял на поведение «правильных» браузеров.
Кстати, «неправильные» ИЕ5.5, ИЕ6, и ИЕ7 показывают всё именно так, как мне хотелось :)
И, что самое смешное, в «правильных» браузерах всё встаёт на свои места при назначении border`а на родительский div.
Вот код примера:
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<style>
* {margin: 0; padding: 0;}
html, body {height: 100%;}
#container {height: auto !important; height: 100%; min-height: 100%; width: 300px; background: yellow}
#content {height: 50px; margin-top: 200px; background: green}
</style>
</head>
<body>
<div id="container"><div id="content"></div></div>
</body>
</html>Пример с включением/выключением границ родительского div`а можно посмотреть тут: e1.nnov.ru/strange.html
UPD: вот статья, где понятным русским языком объяснены все эти странности: softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins
