CSS margin-top influencing outer

Question

 <body>
  <div id="naslov">
    <img src="image/Conto_logo.png" title="Conto Regis" alt="contologo" />
  </div>
  <div id="izbornik">
    <div id="home">
    </div>
  </div>
</body>

 body {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:1.0em;
    font-weight:100;
    margin:0px;
    color:#000;
}
div#naslov {
    height: 128px;
    width: 100%;
    background-image: url(../image/Header.png);
    background-repeat: repeat-x;
}
div#naslov > img {
    cursor:pointer;
    height: 80px;
    margin:20px 0px 0px 20px;
}
div#izbornik {
    width:100%;
    height: 45px;
    background-image: url(../image/izbornik.png);
    background-repeat: repeat-x;
}
#home{
    height:27px;
    width:28px;
    border:#000 1px dashed;
}

I'm having problem positioning div "home" inside div "izbornik" when I use margin-top to pull div "home" a bit down something strange happens. Dreamweaver displays it fine while IE10 and Chrome(latest) display it as if I used margin-top inside div "izbornik". Funny thing is if set div "home" to float:left margin starts acting normal but I'm not sure why, I'll be using some javascript later when the template is completed and I need the page to be very very stable. Any suggestions? http://jsfiddle.net/xNrGR/6/ => in short why does that 8px gap appear there? I need the div "home" to go down not the whole parent-child combo

[Be](http://stackoverflow.com/questions/102640/css-margin-collapsing) [aware of](https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) [`margin collapse`](http://reference.sitepoint.com/css/collapsingmargins‎) — Hashem Qolami, Aug 23 '13 at 16:21
It's hard to tell what the problem is: http://jsfiddle.net/xNrGR/ — Explosion Pills, Aug 23 '13 at 16:23
put some colors instead of urls and put "margin-top:8px" in #home{} you'll see that the parent div moves down while the child div stays nested inside it.. and I'm trying to get that child div to move down inside the parent div — Spidey, Aug 23 '13 at 16:57

score 1 · Accepted Answer · answered Aug 23 '13 at 17:15

1

Add overflow:auto to #izbornik. Seems to be a collapsing margins issue.

div#izbornik {
    width:100%;
    height: 45px;
    background: red;
    background-repeat: repeat-x;
    overflow:auto;
}

jsFiddle example

answered Aug 23 '13 at 17:15

j08691

204,283
31
260
272

A little long to explain, but read https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing or Google collpasing margins. – j08691 Aug 23 '13 at 17:28

score 0 · Answer 2 · answered Aug 23 '13 at 17:27

This is collapsing margins. You can fix this by setting overflow: auto or overflow: hidden to the parent div. This can cause issue for some users depending on the content you have.

The other option is to give the parent div a border. If you make the border the sam color as the background it would not be noticeable. When people use 1px border they normally use margin -1px too. These are just some ways of tackling the problem.

DEMO http://jsfiddle.net/kevinPHPkevin/xNrGR/9/

border: thin solid red;

CSS margin-top influencing outer

2 Answers2