I am having a margin collapse issue with some bottom margins and top margins in IE6 and Opera 9.25.

I found an article where someone attempts to explain the problem and it was all going well and I was beginning to understand why it happened, however, I reached a point where the writer came up with a solution to fix the margin collapse issue, but the problem is that he contradicted himself about how the box model works, and so this hasn't solved my problem (when I tried it).

Here is a link to the article. The contradiction is here:

The first thing you need to understand is the CSS box model. In its simplest form, a box is a block element, like a DIV, for example. In the middle of the box are the contents ... Then outside the contents, but still inside the box, is the padding. Then outside the padding, but still inside the box, is the border. Outside the border is the margin.

The solution to the unwanted gap, is to make sure the margin collapse cannot happen. The way to do that is to make sure the 0 pixel top margin of the DIV and the 16 pixel top margin of the paragraph cannot touch each other. This is where the box model becomes useful ... it is also possible to manipulate the DIV to insert something between the paragraph's top margin, and the DIV's 0 pixel top margin. The way to do that is to add a top padding or top border of at least 1 pixel of height onto the DIV, since they sit between the two margins.

Okay, so from this I understand that the margin is the outermost of all three (the border, padding and margin) so then if we look at what he says in bold in the second quote, how will adding padding stop the two margins from touching?

I am still no where closer to solving the problems I am having with my layout and the margin collapse issue.

FredVaux.com | LightFused.net

[Nutrox]

What exactly do you mean when you say "margin collapse"? Are you talking about margin overlap, where the browser uses the greatest margin value of two adjacent elements instead of adding the margin values together?

[flashkicks]

Yeah, that's what I mean. Sorry for any confusion.

[Nutrox]

IE6 can be a pain in the rear sometimes when it comes to margins, I'm surprised Opera is causing a problem though. Do you have anything online we can see, or can you ZIP up some files? It is a bit difficult to help you out without seeing what the actual problem is because there isn't really a quick-fix you can use every time a problem like this appears, none that I know of anyway.

[flashkicks]

Nevermind. I fixed it using padding rather than margins because otherwise Opera is a pain and doesn't even create a gap that the margin should create, and does create in FF and IE.