Weird margin problem in IE with floating div’s
December 6th, 2007 in CSS Tutorials. 21 Comments
Here’s a rather quick css tutorial, but in my opinion, a rather important one. Have you ever noticed when you code a website that uses floating div’s that IE6 does some really weird things with the margin widths?
I’ve came across this before, normally you can get away with a few extra pixels without having to worry, but when you’re coding sites that have large margins on a floating div it can really get messy. Anyway I decided enough was enough, I wasn’t going to leave it, I fiddled around for an hour or two with my CSS file and finally I came up with the reason IE6 doubles the margin on a floating div and that reason is…..(drum roll..)….there is no reason, it shouldn’t do it, it can only be described as a bug!
The Fix
Now to the important part, how to fix the weird margin problem in IE6, and the fix is just as weird as the problem you simply add:
display: inline;
Into the CSS code for the floating element.
Again there’s no reason why this should happen, it’s just one of those things!
I find if you use this technique with the essential css code from my other tutorial I can quickly create layouts that are very, very cross browser compatible.
21 Comments
Jamie
December 6, 2007 at 5:35 pm
Cheers for that :) Something I’ve been having to use a lot lately. More that know about this the better.
thinlight
December 14, 2007 at 10:57 pm
IE has too many bugs.
Hope Opera win the battle against IE this time.
dr john
December 18, 2007 at 7:16 pm
I have to say this – why don’t you give us an example of this weird margin problem you are trying to correct, with code that goes wrong, and then how you correct it. Cos at present I have no idea what you are trying to sort.
jgil
February 15, 2008 at 2:27 pm
That solved my problem. I was surprised that someone had the exact situation as I did (floating divs having 2x the margin size in IE6) and even more surprised that it only took a simple display:inline to correct. Thanks ;)
ryanm
April 23, 2008 at 9:44 am
Yes that solves the problem thanks for the tip…
bradzz
May 22, 2008 at 6:00 am
thanks, solved my ie6 problem – floats shifting to the right but tables in the right place – this is so simple its stupid! Now my site works on ALL browsers thank goodness.
Bradzzzz
Poppy
May 25, 2008 at 12:51 am
Just had to say thanks, had the same issue trying to make a site cross browser compatible and as usual IE6 had the only one little quirk that messed it up. Your tip fixed it in a couple of seconds! Excellent!
Nathan
May 29, 2008 at 6:01 am
Just wanted to join the chorus of thanks. This fixed a problem which has been vexing me for a week.
Bummer
September 25, 2008 at 1:42 pm
Thank you very much for this fix. It helped me well. ;)
Johny
October 18, 2008 at 10:43 pm
This is great! Thanks for posting this. Saved me a lot of time.
Tru Design Media
December 2, 2008 at 10:41 pm
I would really like to see every company, every webmaster, every web developer start turning everyone to firefox… and firefox only! get rid of IE all together, all it does is cause problems, and need fixes for thousands of stupid bugs. I hate IE for development purposes! Can anyone give me a reason why IE is better than firefox or safari?
Tru Design Medias last blog post..Cascading Style Sheets (CSS)
Tru Design Media
December 2, 2008 at 10:42 pm
grrrrr…. firefox!
Err
January 12, 2009 at 10:07 pm
You sir just saved me hours of work. I’ve been messing with trying to call out IE specific code using that “* html” garbage.
Thank you, Thank you, Thank you.
Raja Ravipati
January 28, 2009 at 6:14 am
Hi,
Wow. Really good site. Please use the following css to line up the
read more links on the pages
.home-post-wrap{position: relative;}
.readmore{position:absolute;bottom:10px;right:20px}
milka2706
February 23, 2009 at 5:01 am
I won’t be very original but THANKS A LOT… I’m working on my first website and it is quite a serious project for my work and I was so stressed about margins in IE 6 and now, no stress, life is beautiful, again ;-) THANKS :D
Mathijs Segers
March 15, 2009 at 7:42 am
hah, I could not test before today on IE6 due to vista, but I had the same problem, applying the display:inline; to my h1 fixed the layout :).
I forgot about this, thanks for blogging.
tamerlan
April 18, 2009 at 5:24 pm
Hey thanks man it solved my problem , i had the same issue with margins in IE 7 too, so after your tricks it ran away:)
CHeers
Eigenthijs
June 16, 2009 at 8:36 am
Thanks its a small thing that helps me alot!
Joe Williams
June 16, 2009 at 8:54 pm
Waw!!! this had haunted me for years and to think the solution was a simple inline tag. Thanks a million, this is a corner turned and I am grateful to you!! cheers
Kevin
October 8, 2009 at 4:20 pm
Thanks!!!!
Laurie
May 13, 2010 at 3:09 pm
Hi,
it’s been a while since people have commented on that article, but I having problems with my bottom margins in IE, I tried the display: inline;… still not working.
I honestly have no idea what to do now… feel free to suggest!
Thanks for your help!