Margin top and bottom issue in Chrome and Firefox

I have created a div within a div, however the problem is that any attempt to add margins to the top or bottom for the internal div results in moving the container div. The code is as below:

HTML:

<div class="border">
    <div class="main">
        <p>
            hi
        </p>
    </div>
</div>

Code (markup):

CSS:

div.border {
    width: 750px;
    background-color: #FFF000;
    margin-left: auto;
    margin-right: auto;
    background: url('images/gradient.png');
}

div.main {
    border: 5px;
    border-color: #000000;
    border-style: solid;
    width: 700px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #FFFFFF;
}

Code (markup):

This is how it displays in firefox and chrome:


This is how it shows in IE, the way I want it to show in other browsers:


Any help would be great. I'm not that crash hot at CSS so it may be something extremely obvious.
Thanks

 

Set a definite height for your border div.

 

Try getting rid of the top and bottom margin of the main div, and adding top and bottom padding to the border div, thus:

div.border {
    width: 750px;
    background: #fff000 url(images/gradient.png);
    margin: 0 auto;
    padding: 10px 0;
}

div.main {
    border: solid 5px #000;
    width: 700px;
    margin: 0 auto;
    background-color: #fff;
}

Code (markup):

 

I don't have IE available to look at it but the thing to always remember is Firefox will show what you wrote while IE will make things up as you go along. Trust what Firefox is showing you. Get it working there first. Then hack IE for its many quirks and bugs.