The problem

I have a div floated left, applying margin-bottom, and a clearing div beneath it applying margin-top.

In Firefox, the margins are collapsed, in IE7 they are combined. I've googled for an elegant solution but so far no luck. (Possible solutions I've come across are applying padding instead of margin, creating extra non floated markup and applying the margin to that).

Demo

I've created a demo here: http://joshamos.com/css/ie7-float-margin.html

The gap between the black and red boxes is double in IE7 than in Firefox.

Forgive me if this exact issue has been addressed previously.