HTML not letting me add a top margin

Question

I've got some simple HTML code in which I am building the basic layout for a simple website.

I am trying to position the red bar to be vertically centered inside the green area. For some reason, it will not move down when I add a top margin. I've been trying to figure out why for a half hour - so frustrating!

Here's the JSFiddle: http://jsfiddle.net/Hut9M/

Here's the code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Basic</title>
</head>
<body>
  <div id="milestone">
      <div id="milestonecontent">
          <div id="event">
           </div>
      </div>
      <div class="actions">
      </div>
  </div>
</body>
</html>

And the CSS:

#body{
  background-color: #e9eaed;
}

#milestone{
  width: 512px;
  height: 137px;
  background-color: blue;

}

#milestonecontent{
  width: 512px;
  height: 104px;
  background-color: green;
}
#event{
  position: relative;
  margin: 10px auto;
  width: 512px;
  height: 58px;
  background-color: red;

}
.actions{
  border-top: 1px solid #e9eaed;
  position: relative;
  width: 512px;
  height: 33px;
  background-color: grey;
}

Also you have a style "`#body`" but no id for `body` element - remove the "`#`" in CSS or add "`id="body"` to the `body` element if you want that style to be applied to `body element` — jave.web, Feb 09 '14 at 16:58
PLease check my edited answer where the real problem is solved :) — jave.web, Feb 09 '14 at 17:09

score 1 · Answer 1 · answered Feb 09 '14 at 16:55

1

You can add display: inline-block; to your #event DIV.

#event {
    display: inline-block;
    margin-top: 23px;
}

Demo

answered Feb 09 '14 at 16:55

AfromanJ

3,922
3
17
33

It worked! Can you explain why? – CodyBugstein Feb 09 '14 at 17:02
Row/inline element is considered as something that is the inner content of the wrapping element - so there is no margin-collapse happening - unlike block elements where child-element-margin collapses with the wrapping-element-margin. – jave.web Feb 09 '14 at 17:15

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

You could make it an inline-block element as @AfromanJ suggested or you could:

2) add a padding-top to the wrapping element #milestonecontent

3) add a 1px or more transparent border: 1px solid transparent; to the wrapping element #milestonecontent .....but the

REAL SOLUTION

is to add a overflow:auto to the wrapping element #milestonecontent

Fiddle: http://jsfiddle.net/Hut9M/12/
Code:

#milestonecontent{
  width: 512px;
  height: 104px;
  background-color: green;
  overflow: auto;
}

Solved also in here: CSS: Margin-top when parent's got no border

edited May 23 '17 at 12:28

Community

1
1

answered Feb 09 '14 at 17:03

jave.web

13,880
12
91
125

Can you explain why this is the "REAL solution"? – CodyBugstein Feb 09 '14 at 19:45
1

Because other solutions are workarounds - you explicitly wanted to set a margin-top/bottom to your current child-element. Setting parent's padding changes its original size. Setting a border gives extra space. Setting an inline-block behaviour is the least-workaround but still makes your element inline-block - now it is a full width element so it does not matter, however if it would matter if the width would be bigger than the parent's one. So finally overflow: auto; is more of an "setting" how the margins should be handled - to be handled as you expect. Hope it is clear :) – jave.web Feb 09 '14 at 19:50
*inline-block - if the element's width would be of course smaller than the parent's width... inline-blocks dont have line breaks after them => it can be solved by adding a `
` but why would you do that when you can just have a block-only element :) – jave.web Feb 09 '14 at 20:07
1

Also if you want to center it dynamicly I would recommend giving a parent alement a position relative and to your centered box absolute position and left: 50%, top: 50%, margin-left: -Width/2; margin-top: -Height/2; (margins are negative pixels). – jave.web Feb 09 '14 at 20:10

score 0 · Answer 3 · answered Feb 09 '14 at 17:06

A block element like div has width:auto by default. you can give padding-top to parent milestonecontent and margin:0 auto; to event container which will keep'em centered across all resolutions.

a little glimpse of what i have modified,

#milestonecontent{
  height: 104px;
  padding-top:20px;
  background-color: green;
}

#event{
  margin: 0 auto;
  width: 300px;
  height: 58px;
  background-color: red;
}

Working Demo.

HTML not letting me add a top margin

3 Answers3

REAL SOLUTION