0

I want to rewrite the html and css for this portion of a webpage.

First I tried using margins to push down the #Header div but it did not happen from the top: the header remain attached to the top border of the #Container.

#Container {
  background: blue;
  height: 200px;
  width: 440px;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
}
#Header {
  background: #CF1111;
  width: 400px;
  height: 130px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 30px;
  margin-bottom: 20px;
}
<div id="Container">
  <div id="Header"></div>
</div>

Then, my solution was using the top property with relative positioning

#Container {
  background: blue;
  height: 200px;
  width: 440px;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
}
#Header {
  background: #CF1111;
  width: 400px;
  height: 130px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 30px;
  position: relative;
  top: 30px;
}
<div id="Container">
  <div id="Header"></div>
</div>

Why didn't the margin-top work?

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Screenshot is not attached. – gevorg Jun 19 '16 at 19:16
  • It should work just fine. It works fine here with margin-top: https://jsfiddle.net/ggs04qz9/ – Sgt AJ Jun 19 '16 at 19:20
  • I just realized I added borders. It didn't work without them. As I just learned by the link to the duplicate question, without borders on your divs, you're seeing an effect called `margin-collapsing.` – Sgt AJ Jun 19 '16 at 19:21

0 Answers0