Bug Fix: IE Double Margin Float Bug


/ Published in: CSS
Save to your folder(s)

It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. The fix is extremely simple. All you have to do is apply a display: inline rule to your floated element.


Copy this code and paste it in your HTML
  1. /*
  2.   Instead of this
  3. */
  4. #content {
  5. float: left;
  6. width: 500px;
  7. padding: 10px 15px;
  8. margin-left: 20px;
  9. }
  10.  
  11. /*
  12.   Do this
  13. */
  14. #content {
  15. float: left;
  16. width: 500px;
  17. padding: 10px 15px;
  18. margin-left: 20px;
  19. display:inline;
  20. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.