Question

This isn’t a production issue this is just something I ran across and have been wondering about. The margin of an inside div won’t get the parent div’s background color, unless I add a border to the parent div. So the innerDiv’s margin won’t get the background of the header div unless I add a border to the header div.

<div id="container">
   <div id="header">
     <div id="innerDiv">Title</div> 
   </div>
   <div id="content" >

     <button>Remove Border</button>
   </div>

   <div id="footer" >
     footer
   </div>

</div>

this fiddle hopefully demonstrates my question.
http://jsfiddle.net/eTq2P/6/

So I’m not looking for a work around, I’m wondering why the margin doesn’t get the background color of the parent div unless a border is added to the parent div. I was expecting the margin to be included inside of the parent div.

Answer 1

Adding border forces #header to contain #innerDiv, therefore stretching it to the size if #innerDiv. You can accomplish the same thing without border by adding

#header {overflow: auto;}

See also: CSS: Adding a border changes the background-color (?!)