Still Having Difficulties With Floats In IE? Try Using Borders or Padding Instead of Margin

We’ve all been frustrated by float bugs in IE – all versions of IE. There’s the Double Margin bug, the Drop Float bug, the Three Pixel bug, and the myriad other mysterious float problems.

Try This

When you are having these issues, try using padding or even borders, instead of margin. For instance, if you want 18 pixels between your left column and your right, but instead the space is looking more like 36 pixels, or if the right column is dropping down all together, instead of giving the left column a margin-right of 18px, try padding-right, or even border-right if you have to. It can be a great quick fix when you don’t have time to go through a huge debugging process.

This entry was posted on Wednesday, November 1st, 2006 at 12:50 pm and is filed under CSS, Tips and Tricks. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

4 Responses to “Still Having Difficulties With Floats In IE? Try Using Borders or Padding Instead of Margin”

  • David Hucklesby Says:
    November 2nd, 2006 at 10:17 pm

    Three years ago I came across this advice from Eric Meyer:

    “Whether floating or positioning a column, browser bugs make it almost a requirement that you place the column’s DIV without any border, padding, margin, or background. Simply use the DIV as an invisible construct inside which you place elements that have whatever borders, margins, and so on they need.”

    Not ideal, as it introduces extra DIVs. But another alternative you may find useful.

  • Jake Says:
    November 6th, 2006 at 6:57 pm

    Great tip! Floats drive me crazy!

  • sarah Says:
    November 14th, 2008 at 10:04 am

    hi mani! floats do drive me mad. and designing them so that they work across browsers is harder than climbing a rock wall (for me). thanks for the tips!
    btw, when you code a xhtml doc, do you use “transitional” or “strict” mostly? i’m unsure as to when to use what.

  • Sheriar Designs Says:
    November 14th, 2008 at 10:15 am

    Hi Sarah – I usually use transitional, because clients want the ability to open links in new windows without losing validation. But my site is coded using strict.