Weird margin problem in IE with floating div’s

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.


This entry was posted on December 06th, 2007 and is filed under CSS Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.

 
« New design up
New Host! »
 
 

19 Responses to “Weird margin problem in IE with floating div’s”

  1. Jamie
    6. December 2007 at 17:35

    Cheers for that :) Something I’ve been having to use a lot lately. More that know about this the better.

  2. thinlight
    14. December 2007 at 22:57

    IE has too many bugs.
    Hope Opera win the battle against IE this time.

  3. dr john
    18. December 2007 at 19:16

    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.

  4. jgil
    15. February 2008 at 14:27

    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 ;)

  5. ryanm
    23. April 2008 at 09:44

    Yes that solves the problem thanks for the tip…

  6. bradzz
    22. May 2008 at 06:00

    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

  7. Poppy
    25. May 2008 at 00:51

    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!

  8. Nathan
    29. May 2008 at 06:01

    Just wanted to join the chorus of thanks. This fixed a problem which has been vexing me for a week.

  9. Bummer
    25. September 2008 at 13:42

    Thank you very much for this fix. It helped me well. ;)

  10. Johny
    18. October 2008 at 22:43

    This is great! Thanks for posting this. Saved me a lot of time.

  11. Tru Design Media
    2. December 2008 at 22:41

    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)

  12. Tru Design Media
    2. December 2008 at 22:42

    grrrrr…. firefox!

  13. Err
    12. January 2009 at 22:07

    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.

  14. Raja Ravipati
    28. January 2009 at 06:14

    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}

  15. milka2706
    23. February 2009 at 05:01

    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

  16. Mathijs Segers
    15. March 2009 at 07:42

    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.

  17. tamerlan
    18. April 2009 at 17:24

    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

  18. Eigenthijs
    16. June 2009 at 08:36

    Thanks its a small thing that helps me alot!

  19. Joe Williams
    16. June 2009 at 20:54

    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

Leave a Reply