The IE6 Doubled Float-Margin Bug FIX...

After running into this problem so many times, I thought I would place this on my site. Internet Explorer seems to double the margins on floated objects. It makes no sense and it's a headache. SO, here is a solution!

Example CSS:

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}

In "THEORY" This should work like this:

Internet Explorer does THIS:

To fix this probelm add "display:inline;" to your CSS statement.

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
/*This last value applies the 100px left margin */
}

For more indepth detail about this, check out: www.positioniseverything.net