CODEWITHSUNDEEP
cssxhtmlhtmlcss-float
Bobby Francis Joseph
Bobby Francis Joseph

Reputation: 600

Two column layout does not work properly

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.

Upvotes: 1

Views: 136

Answers (2)

Ankit Varshney
Ankit Varshney

Reputation: 36

First of all the closing div is missing for the opening . Then I added padding-top of 10px in outerContainer.

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

}

I think this will solve your problem. Please let me know what is the result.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78650

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;
}

Upvotes: 3

Related Questions