Strange behavior of "correct" browsers
Today, in the process of verbal fights with browsers, I encountered such an incomprehensible problem: if in a div stretched 100% vertically, place another div with the specified vertical margins, then these indents for some reason affect the parent div (it slides down) .
I repent, I used a well-known, but not very correct technique for stretching the div vertically. But I do not think that it was he who influenced the behavior of the "correct" browsers.
By the way, the “wrong” IE5.5, IE6, and IE7 show everything exactly as I wanted :)
And, what is most funny, in the "correct" browsers everything falls into place when assigning a border to the parent div.
Here is the example code:
An example of enabling / disabling the boundaries of the parent div ʻa can be viewed here: e1.nnov.ru/strange.html
UPD: here is an article where all these oddities are explained in plain Russian: softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins
I repent, I used a well-known, but not very correct technique for stretching the div vertically. But I do not think that it was he who influenced the behavior of the "correct" browsers.
By the way, the “wrong” IE5.5, IE6, and IE7 show everything exactly as I wanted :)
And, what is most funny, in the "correct" browsers everything falls into place when assigning a border to the parent div.
Here is the example code:
<!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>An example of enabling / disabling the boundaries of the parent div ʻa can be viewed here: e1.nnov.ru/strange.html
UPD: here is an article where all these oddities are explained in plain Russian: softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins
')
Source: https://habr.com/ru/post/43421/
All Articles