Why would removing a border shift a <div> down?

**SDSU** · 03-02-2008, 07:20 PM

Hello,

I'm kinda new to CSS. I've been working on centering my web site per the links provided in the stickies in this sub-forum. So I created a <body> and center aligned it, with a <div> container created inside the <body> to reinstate the left align parameter. Then I applied a border to the <div> tag so I could see its dimensions displayed on my screen. The whole technique worked beautifully. Centering the website this way solved a lot of problems I was having previously.

But here's the problem: The <div>container had a background image about 650px by 700px. It was in perfect position with the border around it. But the border was temporary- just a visual guide for me. When I removed it, the background image dropped about 10px to 20px. Any ideas on why this happened?

By the way, it happened in Firefox but not IE.

Thanks!

**LadynRed** · 03-02-2008, 07:50 PM

Lets see the code or a url please

**SDSU** · 08:38 PM

Quote:

Originally Posted by LadynRed

Lets see the code or a url please

Drat. I was hoping you wouldn't ask for that.

Here's a sample with the border

Here's a sample without the border

Must be viewed w. Firefox to trigger error.

**Gilligan** · 03-03-2008, 11:51 AM

try adding padding:15px; to div#container

**angele803** · 02:28 PM

You can even just add one pixel of padding to the top of the container div.

This is an effect of "margin collapse". Here is an article about it: http://www.andybudd.com/archives/200...gin_for_error/

In your case, the container div without any padding or border allows the margin of the body and the margin of the H1 to touch. The browser is collapsing these margins into the largest, which is the margin of the H1. So you get a 20px space at the top of the page, and no space between the top of your container and the H1. Putting a border or padding on the container puts something in between the margins of your H1 and your body, which fixes the collapse. I know that is massively confusing, but it is really hard to explain!

**SDSU** · 03-05-2008, 01:22 AM

Quote:

Originally Posted by Gilligan

try adding padding:15px; to div#container

Quote:

Originally Posted by angele803

You can even just add one pixel of padding to the top of the container div.

This is an effect of "margin collapse". Here is an article about it: http://www.andybudd.com/archives/200...gin_for_error/

In your case, the container div without any padding or border allows the margin of the body and the margin of the H1 to touch. The browser is collapsing these margins into the largest, which is the margin of the H1. So you get a 20px space at the top of the page, and no space between the top of your container and the H1. Putting a border or padding on the container puts something in between the margins of your H1 and your body, which fixes the collapse. I know that is massively confusing, but it is really hard to explain!

Thanks for both of your comments. Adding the padding sure did the trick.

Angele803, thanks for elaborating with your comments and the link. I did read the link. You're right, it's a bit difficult to wrap your head around the first time but I will definitely now be aware of collapsing margins. I'll have to experiment a little to get a better understanding, but these are the types of things I want to learn.