CSS Spacing with Divs and Floats - html

Question

I have the following html:
<div class="count-unit">
<div class="count-digit digit0"></div>
<div class="count-digit digit6"></div>
</div>
<div class="count-unit">
<div class="count-digit digit0"></div>
<div class="count-digit digit4"></div>
</div>
<div class="count-unit">
<div class="count-digit digit4"></div>
<div class="count-digit digit2"></div>
</div>
<div class="count-unit">
<div class="count-digit digit3"></div>
<div class="count-digit digit9"></div>
</div>
Tied to each ".count-digit" is a sprite (viz. background image) which represents a png of a numeric digit. I'm trying to get the sprites to show horizontally with spacing, like this:
06 04 42 39
The CSS I'm using looks like this:
.count-unit
{
margin: 0 20px 0 20px;
padding: 0 20px 0 20px;
}
.count-digit {
background-image : url(Images/numbers.png);
background-color : transparent;
background-repeat : no-repeat;
float: left;
}
.digit0 {
height : 44px;
width : 30px;
background-position : -0px -0px;
}
Only one of the sample digits (".digit0") is shown. As can be seen, I'm trying to put the spacing around each "numeric" image-pair with padding or margins on the containing "count-unit" div. It isn't working. The "float: left" on the ".count-digit" is bypassing margin and padding settings.
How should I fix this? I tend to think I need to kill the floats, but the alternative "display: inline" prevents the sprites from showing.
Worse, though these sprites work on IE8 and Chrome, they aren't showing when I turn on IE8 compatability mode. I'm not sure what that is about. Any ideas?

Answer 1

The float: left property shouldn't ignore margins or padding. I think you should have specify floating for the .count-unit class though.
.count-unit {
margin: ...
padding: ...
float: left;
}
I've tried it here, and there doesn't seem to be any problem: http://jsfiddle.net/QGZjn/1/