Moose56 blog /pictures, code and word

Double Margin Bug /21 August 2007 @ 5pm

Don’t you just hate it when you spend hours lovingly crafting a layout in CSSedit/Safari/FireFox to the point of beautiful elegance only to discover that IE turns it into a pile of merde? This happened to me just the other day and even though it was down to a tiny, well known bug it still caused me a little grief. Because of this here is yet another blog post about fixing the double margin bug so others may fix it quicker than I did.

So first up, here is what I was after; a 640px wide wrap div centered on the page with a content div centered inside it. The wrap div has a vertically tiled background image that adds a left and right drop shadow border. The width of the border on each side is 5px. I also wanted a margin between the content div and the wrap border. Because of this I made the content div 600px wide giving 20px on each side for a margin. Giving the content div a left margin of 20px centers it nicely inside the wrap div.

#wrap {
    width: 640px;
}

#content {
    width: 600px;
    margin-left: 20px;
}

So I though I was finished, Safari/FireFox/Opera all playing nicely and so was IE7. Then a quick check in IE6 and IE5 (I am a charitable sole) and doh it’s all on the right side.

The science bit (concentrate…)

A lot of tweaking later trying different margin and padding settings and I was getting frustrated. Such a little problem causing me a lot of anguish. Anyway a quick Google on “IE margin problem” and “IE messing up margin” turned up this forum thread (thanks suzyUK).

So according to that all I need to do is add display: inline; to the content div.

#content {
    width: 600px;
    margin-left: 20px;
    display: inline;
}

Magic, IE5/6 working like a charm and all the others are unchanged. Sorted!