Double Float Margin Bug "error"

Question

I did a browser compatibility check on one of the pages that
I am building and got this error.............
"Line 112, Double Float Margin Bug 'error'
When a margin is applied to a floated box on the same side as
the direction of the float, the margin is doubled. This bug only
affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely"
I have many thumbnails for a gallery page in their own divs,
within the content div, and they are floated in there.
When I viewed solutions, they suggested:
"When a margin is applied to a floated box on the same side
as the direction the box is floated AND the floated box is the
first one inside its containing box, the margin is doubled. (In
other words, a left-floated box with margin-left set to move it
away from its containing box will be twice as far away from the
left edge of the containing box as intended.)
SOLUTION
Specify display: inline; for the affected float.
DETAILED DESCRIPTION
This bug only reproduces when the floated element's margin
extends in the same direction as the float itself, and is between
the float and the container box's inside edge. Subsequent floats
with similar margins won't reproduce this bug- just the first float
in any row of floated elements."
Does anyone have any solutions, suggestions as how to fix
this? I will attach my code. And if anyone has a better solution as
to laying my thumbnail divs in another div container, please say
so. The reason I am putting them in separate divs is because that
is what someone suggested to use them with Lightbox2. He said they
needed some kind of special CSS to enable some of the functions and
they (the thumbnails) were easier to style if they were in their
own separate divs. I'm open for any suggestions.
Thanks!

Answer 1

Just add "display:inline" to the styling like this:
.image {
background-color: #121922;
height: 100px;
width: 100px;
float: left;
margin: 20px;
display: inline;
}