judging from what happens when you change the elements to block -- it looks like sf_cols was given inline-block to allow margins to be defined in wrapped elements.
so if sf_cols is wrapped around a layout element, and that element has margin-top of 40px, then the top of sf_cols stretches up 40px above the inner element.
if sf_cols were block, then it's top (and therefore its background image) would be right in line with the inner element, and anything above it would be 40px above the block sf_cols.
sf_cols doesn't clear properly in IE8 if it's inline-block, so to fix, I had to make it block and then track down all the templates that put margin top or bottom on an element inside an sf_cols with a background image.
by removing the margin, applying a CSS class and the putting padding on the CSS class in place of margin, all is well.
i personally think it would make a lot more sense if sf_cols were block, and in the template editor padding was assigned instead of margins