Question

I am trying to make a HTML page using two column layout.

I have a version in jsfiddle

http://jsfiddle.net/bobbyfrancisjoseph/eFMpJ/35/

I am unable to set a top margin for the the inner container.Though I have given a top-margin for the innerContainer its not been reflected in the page.

The reason I am using an inner container for containing the left-sidebar and innerContainer is that in the actual page I have two more divs side by side in the inner-container.I do not prefer to use three column layout for that reason.

Answer 1

Your issue is with margin collapsing. You can prevent the margins from collapsing by using a border or padding. There’s a good explanation here: http://reference.sitepoint.com/css/collapsingmargins

http://jsfiddle.net/eFMpJ/46/

#outerContainer
{
   background-color:#FFF000;
   margin:10px 10px 10px 10px;

   border-top: 1px solid black;
   // or padding-top: 1px;
}