margin pushing parent element instead of itself

Question

Hey guys I have a little problem with my css and I can't figure out why it's doing it. The block is placed inside the container it should push itself away from the container position but instead it pushed the whole container down? Can someone explain what's going wrong? Thanks in advance!

http://jsfiddle.net/aFcZa/

Html

<div id="header">
</div>
<div id="container">
<div id="block">
</div>
</div>

Css

#header {
width: 100%;
height: 80px;
background-color: black;
}

#container {
width: 70%;
height: 500px;
background-color: green;
margin: 0 auto;
}

#block {
width: 300px;
background-color: red;
height: 300px;
margin-top: 50px;
}

Answer 1

You need to float child element, or change display property to change it's position inside parent element.

Floating

HTML

<div class="header"></div>
<div class="wrap">
    <div class="content"></div>
</div>

SCSS

.header {
    width: 100%;
    height: 80px;
    background-color: black;
}

.wrap {
    width: 70%;
    height: 500px;
    background-color: green;
    margin: 0 auto;
    .content {
        margin-top: 30px;
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
}

JSFiddle

Display

Or just change display:inline-block for child element

HTML same code

SCSS

...
.content {
        margin-top: 30px;
        width: 100px;
        height: 100px;
        background: red;
        display: inline-block;
    }...

Answer 2

It pushes the container down, because the #block element is IN the #container element.

If you change your html markup like this:

<div id="header"></div>
<div id="container"></div>
<div id="block"></div>

the #block element will push itself away from the #container element.

Example Fiddle

UPDATE:

If you want to keep your HTML structure, just give #block the following css: position: absolute;.

Working Fiddle

Answer 3

An overflow:auto to #container should do it.

Answer 4

Margin bleeds outside of it's container unless you specify padding on the parent container. Give the parent 1px padding on the edge that is adjacent to your child element's margin