Inner Div Problem on Firefox 2

[ginger213]

Hi,

I'm new to using css for positioning and I'm having trouble getting the page to look right in Firefox. What I'm trying to get is a 750px wide "inner div" that has a 1 px border and a margin all the way around of 15px contained in a container div that's 780px wide and centered on the page. Body background is colored; divs have a background of white.

What I'm getting in Firefox is the inner div has a margin on the left between the container and inner div, but not on the right or bottom.

Here's my css:

div.container {text-align: center; background: #FFFFFF; width: 780px; height: 480px; margin: auto}
div.inner {background: #FFFFFF; text-align: left; width: 750px; height: 450px; border: 1px solid #c0c0c0; padding: 15px; margin: 15px}

In other words, I want to have a 15px space between the inner div's border and the outer div all the way around.

Can anyone help?

Thanks!

 

[Vragabond]

Lets see. Your inner div is 750px wide. On top of that it has 15px of padding on each side. 15px * 2 = 30px. So 780px. On top of that it has 1px of border. Again, border is on both sides, so 2px altogether. 782px already. Now we add some margin. 15px on each side. 30px altogether. 812px. Hard to fit 812px into 780px container, isn't it.

If IE6 or later is not acting the same way, make sure you add a complete and valid doctype as the first thing on your page.

 

[ginger213]

Ah, I forgot the doctype, but I was thinking that padding was applied "within" the border and wouldn't cause the div to expand its width. I guess I don't have that right yet. :-\

 

[ChrisHunt]

You've not allowed for the proper CSS box model. The height and width of an element measure the dimensions inside any padding or borders. So the overall width of your inner <div> is 750px (width) + 30px (2 x padding) + 2px (2 x border) = 782px - already wider than the container before you start worrying about margins.

Margins are also funny things and don't always behave as you might expect. If a container has no border and no padding, a contained element's margin can extend outside the container. See

http://www.complexspiral.com/publications/uncollapsing-margins/

If you want the effect of 15px of white, then 1px of grey, then 15px more white, then your content, I'd do it like this:

div.container {
   border: 15px solid #FFF;
   padding: 0;
   margin: auto;
   width: 750px;
}

div.inner {
   background: #FFFFFF;
   text-align: left;
   height: 450px;
   border: 1px solid #c0c0c0;
   padding: 15px;
   margin: 0
}

Not giving the inner <div> width, it will expand to fill the outer <div>. Not giving the outer <div> height, it will expand to accommodate the inner <div>.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ginger213]

Actually, I did have a doctype so that wasn't the problem, but I didn't understand that the width of an element was measured inside the padding.

So I need to use a thick wide border for my outer div to get that white spacing around the inner div I guess.

Your code works exactly as I wanted Chris.

Thanks so much!