O'Reilly

Prevent Double Margin & Padding In IE6 When Using CSS Float

By on  

My thoughts on Internet Explorer have been well documented; for those that don't already know, I think IE hinders the internet's progress and represents another embarrassment for Microsoft. That said, a majority of users still browse with Internet Explorer 6 so it's important to make sure our customers' websites look good in the browser.

One of IE6's glaring mistakes is producing double padding and/or double margin when using the respective property on two floating DIVs that fall next to each other. Since I build websites using all DIVs, I run into this problem with every framework I create.

The Problem

The above title is misleading, as my code isn't the problem -- IE6 is. That said, the following code alone isn't good enough:

#global-column-1			{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; }
#global-column-2			{ margin:0 0 30px 30px; width:250px; float:left; }

The above code will result in double padding in IE6.

The Solution

Use IE6-only CSS code to fix the problem in that browser.

#global-column-1			{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline; }
#global-column-2			{ margin:0 0 30px 30px; width:250px; float:left; }

The "* html #global-column-1" declaration is only viewed by IE6. The"display:inline;" code actually corrects the double spacing.

Shouldn't developers and the browser creators be working together? Apparently not, as Microsoft never fixed this issue.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • 5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • Editable Content Using MooTools 1.2, PHP, and MySQL

    Everybody and their aerobics instructor wants to be able to edit their own website these days. And why wouldn't they? I mean, they have a $500 budget, no HTML/CSS experience, and extraordinary expectations. Enough ranting though. Having a website that allows for...

Discussion

  1. Excellent! Step 1) bang my head against desk for 2 hours. Step 2) find this site, fix works perfectly. Step 3) I’m on break.

  2. Underscore

    There’s no need to add a new selector since the float automatically triggers display block and therefore ignores the display inline.

    To signify that this is just a fix for IE I much prefer to use the underscore hack and just add _display:inline; in the same selector. Before someone points it out, validation doesn’t matter to me.

    Lastly, double padding? Don’t think that’s a bug introduced by float.

  3. missy

    Hmm… hacks galore. Clearing the containing float – or at least giving it a value that triggers hasLayout often works, as does display:inline (without the unecessary underscore hack).

    If more people coded to validating standards, fewer IE6 bugs would manifest themselves and more could be resolved with additional attributes as opposed to hacks.

  4. Hayata

    Fixed it. Bang! Thank you, thank you, just…thank you. You wrote the only description of this hack that is actually understandable by people.

  5. This worked like a charm. Thank goodness I found your site before I started getting gray hairs from this problem. Thank you!

  6. Thanks for this. It’s such a hassle making sites work for IE6 and this saved me some time.

    I use conditional comments to load IE stylesheets, which means no hacks in my main stylesheet – well, one for safari ;)

  7. Ahhh! Thank you so much! Even though IE7 is so much better still a lot of people are on 6 so this makes a great solution.

    Thanks again!

  8. Hey man ,many thanx for this, i didn’t had to think twice to see what you meant, it was really crystal clear explained!
    Keep up the great work and wil for helping people.

  9. I’m really sick of comments like this:
    “I think IE hinders the internet’s progress and represents another embarrassment for Microsoft.”

    Lets just have a little recap here and go back before Firefox existed and run down the list of things that IE invented.

    1) The Document Object Model in IE3, remember that? Or do you still want to use Netscape’s Layer tag and not be able to access every object correctly?

    2) AJAX. Yes it was MS that first had the XMLHTTP object, and eveyone else copied it.

    3) Dynamic page flow, good old DHTML, IE again was the first to allow it.

    Yes I know it’s showing it’s age, but just look at what we’re discussing now, this is a triffling little border issue, and for those of us that can remember back before Firefox when the browsers were truly broken as in the Netscape 4 page refresh bug, you’ll see how ridiculous this statement is.

    IE invented the modern web browser, Firefox just made it better.

  10. Adam90

    what about double padding and margin in footer???

  11. Jonathan

    Thanks this is what I was looking for.

  12. dude

    Thanks David. BTW display:inline-block worked for me as opposed to display:inline. Cheers

  13. kates

    Thanks a lot ! It worked for me

  14. Geri

    You’re a lifesaver. Thank you!

  15. Samet

    You are my hero :) Thank you..

  16. I wish I didn’t have to cater for IE6. Why won’t the world upgrade? Since the migration is very slow this is a great solution that has been explained simply and accurately. Thanks!

  17. As for Nico Westerdale’s comment about IE & Microsoft, it just goes to show that progress doesn’t stand still. While I love microsoft and I think Visual Studio and some of their other products are outstanding, plus what they have done for the browser is remarkable, they have also cause us developers a lot of pain and compromise because of their failure to fix many of these issues within their browsers.

  18. Nico Westerdale

    @Richard – Go download IE9 then ;-)

  19. @Nico – I am currently at work using an XP machine :). I will download the release of IE9 when I get home.

  20. lucky

    Thanks… display: inline; worked for me. But padding is lost. Can you please help me.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...