margin-top on an internal div is getting applied to an external div, not sure why
Here's a fiddle I setup illustrating the problem.

http://jsfiddle.net/rgfjL/13/

Here's the code

HTML

    <div class="body">
        <div class="contact-form" class="clearfix">
            <p> asdsasadsad </p>
        </div>
    <div>

CSS

    div.body {
    display: block;
    height: 800px;
    width: 1024px;
    background: #474747;
    }

    div.contact-form {
    display: block;
    background-color:#F2F7F9;
    height: 600px;
    width:465px;
    padding:20px;
    margin: 250px auto;
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    }​

As you can see in the fiddle, the form div is flush against the top of the body div. Changing top margin on form pushes both of them down.
margin-top on an internal div is getting applied to an external div, not sure why
===

Here's a fiddle I setup illustrating the problem.

http://jsfiddle.net/rgfjL/13/

Here's the code

HTML

    <div class="body">
        <div class="contact-form" class="clearfix">
            <p> asdsasadsad </p>
        </div>
    <div>

CSS

    div.body {
    display: block;
    height: 800px;
    width: 1024px;
    background: #474747;
    }

    div.contact-form {
    display: block;
    background-color:#F2F7F9;
    height: 600px;
    width:465px;
    padding:20px;
    margin: 250px auto;
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    }​

As you can see in the fiddle, the form div is flush against the top of the body div. Changing top margin on form pushes both of them down.