Why is the body's top margin still collapsing?

Question

Usually when parent's margin collapsing overflow:hidden helps but in this situation it doesn't work. Other fixes are working ok padding:0.01px,position absolute. Can you explain why overflow doesn't work here please?

html {
  background: #e3b5a4;
  height: 100%;
}

body {
  background: #d1cfcd;
  width: 960px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

div {
  text-align: center;
  background: #eee;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
</head>

<body>
  <div class="header">Header</div>
  <div class="navigation">Navigation</div>
  <div class="leftcontent">Content Left</div>
  <div class="main-content">Main Content</div>
  <div class="right-content">Content Right</div>
  <div class="footer">Footer</div>
</body>

</html>

link to jsfiddle

Can you explain what you mean a bit more? Like what do you mean by `parent's border collapsing` ? — ProEvilz, Oct 07 '18 at 16:51
Sorry, i meant margin not boarder, like this https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing — ogbofjnr, Oct 07 '18 at 17:46

score 1 · Accepted Answer · answered Oct 08 '18 at 00:48

Because if you don't set a value of overflow other than visible to the html element, the overflow:hidden set on the body gets transferred to the viewport. So it is not applied to the body element and therefore can't stop the margin collapsing. To fix, just set the overflow on the html element to auto.

html {
  background: #e3b5a4;
  height: 100%;
  overflow:auto;
}

body {
  background: #d1cfcd;
  width: 960px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

div {
  text-align: center;
  background: #eee;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
</head>

<body>
  <div class="header">Header</div>
  <div class="navigation">Navigation</div>
  <div class="leftcontent">Content Left</div>
  <div class="main-content">Main Content</div>
  <div class="right-content">Content Right</div>
  <div class="footer">Footer</div>
</body>

</html>

score 0 · Answer 2 · answered Oct 07 '18 at 17:21

That's the regulat behaviour for margins - just set the margin-top for .header to 0:

html {
  background: #e3b5a4;
  height: 100%;
}

body {
  background: #d1cfcd;
  width: 960px;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
}

div {
  text-align: center;
  background: #eee;
  border: 1px solid;
  padding: 10px;
  margin: 10px;
}
.header {
  margin-top: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>layout</title>
</head>

<body>
  <div class="header">Header</div>
  <div class="navigation">Navigation</div>
  <div class="leftcontent">Content Left</div>
  <div class="main-content">Main Content</div>
  <div class="right-content">Content Right</div>
  <div class="footer">Footer</div>
</body>

</html>

Sorry for mistakes, may be you dint get me right. I want top margin for first div also to be 10px as everywhere. It works if i add `padding: 0.01px;` to body. And if i add wrapper div and make it overflow:hidden it also works, but why overflow:hidden dont work with body? — ogbofjnr, Oct 07 '18 at 17:40

Why is the body's top margin still collapsing?

2 Answers2