Advanced Search

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.

Expand | Embed | Plain Text

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.