In the majority of cases, margin collapsing delivers the types of layout results we want. However, in cases such as mine I need my divs together for my site design.

I had ignored this problem in the past but tonight I couldn’t get around it. My layout displayed perfectly in IE7, but when viewing it from a firefox browser it was giving me trouble. I couldn’t get it right, when I was able to fix the space between my divs my text spacing would be off, and for my layout it needed to be perfect. I wasn’t going to resort to absolutes. Here’s the css that was giving me trouble. The divs that the space is between are order_top and order_mid.

So after a little bit of reading I found the solution was adding {padding: 1px 0;} into {order_mid}.

Nothing else worked for me, such as changing my margin, padding, and borders to 0px.
Give this a shot if you haven't figure out how to fix this frustrating problem.

Related links: Uncollapsing Margins
[Solved] Strange space between divs in firefox
collapsing margins
Tags: web divs css margin collapsing
