Why does removing a border from a div break my layout?

Question

I have a site with a sticky footer and i want to have a background image at the top of my contentContainer. With a border its fine but if i remove the border from content"thin blue solid" the whole thing is pushed down and my background image is no longer right at the top...

<div id="mainContain">
    <div id="header"></div>     
    <div id="contentContain">
        <div id="content">
            <h2>Hog</h2>
        </div>  
    </div>
    <div id="footer"></div>
</div>

My CSS is:

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
}
#mainContain {
    min-height: 100%;
    position:relative;
}

#header {
    width: 100%;
    height: 180px;
    background-color: #111111;
}

#contentContain {
    background-image: url('../img/shadow-bg.png');
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 45px;   /* This value is the height of your footer */
}

#content {
    margin: auto;
    border: thin blue solid;
}

#footer {
      position: absolute;
      Width: 100%;
      bottom: 0;
      height: 45px;  /* This value is the height of your footer */
      background-color: #111111;
}

Answer 1

You are probably seeing the results of collapsing margins.

You can prevent margins from collapsing by either adding a border or some padding to the top of your block element, or by creating a new block formatting context by setting overflow: auto, for example:

#content {
    margin: auto;
    border: thin transparent solid; /* option 1 */
    padding-top: 1px; /* option 2 */
    overflow: auto; /* option 3 */
}  

Which Option to Use

If you use the first two options, you are adding an extra 1px of height to the top of your block element by virtue of either the width of the border or the padding.

The third option using overflow will not affect the height of the element.

The first two options will probably be backwards compatible to all but the most primitive browsers. Anything that supports CSS2.1 will work as expected.

As for overflow, it is widely supported all the way back to IE4 with a few minor exceptions. See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow for details.