container div taking extra space

[kingshuk dutta]

hi,
I want to set a basic layout.The #container(width:840 px) div is positioned center of the browser window and contain all the inside divs.#container is also having padding of 20px in all direction to serve as border.

Inside #container, #main(width:800px).But problem is the #main div is not sitting in the center of the #container.It seems #container is taking few extra spaces at the right and bottom side. css code is:

#container{
background-color: #hghhnj;
width: 840px;
position: relative;
padding: 20px;
margin: auto;
}

#main{
background-color: #FFCC00;
height: 800px;
width: 800px;
margin: auto;
padding: 0px;
}

any body can help me?
thanks

[swa66]

Why do you try to use both the padding on the parent, set all widths and use auto margins on the child?

You're far better of using either the padding on the parent (and no width, nor margins on the child), or
don't use the padding on the parent and use the width and margins on the child.

I don't think there's use for that position:relative in this fragment. But it's presence makes me a bit suspicious you're trying to do design in IE. If so: do yourself a favor and switch to any other browser to do the design, and then just later on fix the IE trouble as IE can set you very much on the wrong foot at every turn.

[kingshuk dutta]

Thank you very much for the reply.

Yes its works fine in IE, if I set the margins on the child div.As you suggested I have tried to design for different browser and noticed that In FireFox,it is not showing any margin at the top and bottom.

#outer {
margin: auto;
width: 840px;
background-color: #FFFFFF;
}
#inner {
background-color: #999900;
margin: 20px;
height: 800px;
width: 800px;
padding: 0px;
}

can u tell me-how to set the margin at the top and bottom that will work in most of the browser?

[swa66]

I guess you're seeing collapsing margins.

It's nto the easiest to explain, just look at how much text it took w3.org: [w3.org...]

Basically it means a parent's margins can overlap with the margins of a child in the vertical direction (now that's a simplification of a page to a sentence...) so use padding in the vertical direction.

I'd avoid having things that need to add up (840=20+800+20 in width in your example), I'd go for 840=auto+800+auto or 840=20+auto+20.

[frattaroli]

How about this?

#parent {
position: absolute;
top: 0px;
left: 50%;
margin-left: -420px;
width: 840px;
}

#child {
position: absolute;
top: 20px;
left: 50%;
margin-left: -400px;
width: 800px;
height: 800px;
}

There are always a few ways to go about making a page layout. I always stick with the Header->3 Left-Floated Columns->Footer

[kingshuk dutta]

Thank You very much for the reply.It was very helpful indeed.