A child div inside of a parent div creates white space for the parent div

Question

I dont understand whats happening, a parent div is being affected by the margins I want added to a child div. It is causing the parent div to shift down instead of staying in place and creating whitespace. my error is in the div with id "center".

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #57FFA6;
  color: #221F51;
  font-size: 62.5%;
  font-family: arial, sans-serif;
}
#header {
  background-color: white;
  display: block;
  height: 80px;
  position: relative;
}
#logo {
  display: block;
  float: left;
  margin-left: 115px;
  margin-top: 18px;
  padding: 0 auto;
  position: relative;
}
#navigationBar {
  display: block;
  float: right;
  margin-right: 115px;
  margin-top: 27px;
  padding: 0 auto;
  position: relative;
}
#navigationBar ul li {
  display: inline-block;
}
#navigationBar ul li a {
  color: black;
  font-family: arial, sans-serif;
  font-size: 1.5em;
  text-decoration: none;
  padding: 5px;
  position: relative;
}
#navigationBar ul li a:hover {
  color: gray;
}
#center {
  background-color: white;
  display: block;
  font-size: 1.6em;
  margin: 0 auto;
  padding: 0 auto;
  position: relative;
  width: 990px;
}
#articleOne {
  display: block;
  height: 200px;
  position: relative;
}
#articleOneTitle {
  display: block;
  margin: 50px;
  position: relative;
}

<div id="header">
  <div id="logo">
    <img src="C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/Images/logo.png" alt="logo" height="42" width="115">
  </div>
  <div id="navigationBar">
    <ul id="navigationBarList">
      <li><a href="http://www.google.com">Home</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">About</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Schedule</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Contact</a>
      </li>
    </ul>
  </div>
  <!-- end of navigationBar -->
</div>
<!-- end of header -->
<div id="center">
  <div id="articleOne">
    <p id="articleOneTitle">In-Home Repair</p>
  </div>
  <!-- end of articleOne -->
</div>
<!-- end of center -->
<div id="footer">

</div>
<!-- end of footer -->

Sounds like good old "Collapsing Margins" again. - http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing?rq=1 — Paulie_D, May 05 '16 at 16:00

score 0 · Answer 1 · answered May 05 '16 at 16:27

Add overflow: auto; to #center - strange, but it does the trick...

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background-color: #57FFA6;
  color: #221F51;
  font-size: 62.5%;
  font-family: arial, sans-serif;
}
#header {
  background-color: white;
  display: block;
  height: 80px;
  position: relative;
}
#logo {
  display: block;
  float: left;
  margin-left: 115px;
  margin-top: 18px;
  padding: 0 auto;
  position: relative;
}
#navigationBar {
  display: block;
  float: right;
  margin-right: 115px;
  margin-top: 27px;
  padding: 0 auto;
  position: relative;
}
#navigationBar ul li {
  display: inline-block;
}
#navigationBar ul li a {
  color: black;
  font-family: arial, sans-serif;
  font-size: 1.5em;
  text-decoration: none;
  padding: 5px;
  position: relative;
}
#navigationBar ul li a:hover {
  color: gray;
}
#center {
  background-color: white;
  display: block;
  font-size: 1.6em;
  margin: 0 auto;
  padding: 0 auto;
  position: relative;
  width: 990px;
  overflow: auto;
}
#articleOne {
  display: block;
  height: 200px;
  position: relative;
}
#articleOneTitle {
  display: block;
  margin: 50px;
  position: relative;
}

<div id="header">
  <div id="logo">
    <img src="C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/Images/logo.png" alt="logo" height="42" width="115">
  </div>
  <div id="navigationBar">
    <ul id="navigationBarList">
      <li><a href="http://www.google.com">Home</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">About</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Schedule</a>
      </li><b> ·</b>
      <li><a href="http://www.google.com">Contact</a>
      </li>
    </ul>
  </div>
  <!-- end of navigationBar -->
</div>
<!-- end of header -->
<div id="center">
  <div id="articleOne">
    <p id="articleOneTitle">In-Home Repair</p>
  </div>
  <!-- end of articleOne -->
</div>
<!-- end of center -->
<div id="footer">

</div>
<!-- end of footer -->

A child div inside of a parent div creates white space for the parent div

1 Answers1