在IE7中向左浮动div

Question

I have problem with IE7 and float left divs.

here is css:

.h-slideshowcontrol  { display: block; float: left; width: 14px; height: 14px; }

And html:

<div class="b-slideshowcontrols">
    <div class="h-slideshowcontrol ">
    </div>
    <div class="h-slideshowcontrol ">
    </div>
    <div class="h-slideshowcontrol active">
    </div>
    <div class="h-slideshowcontrol ">
    </div>
</div>

I don't know why, but h-slideshowcontrol in IE7 is like without float left.

PS You can see it on page - http://mindhouse.sitetd.ru/ (rounded buttons under slideshow)

Thanks for help!

PSS I fixed by adding outer block and changing styles to:

.b-slideshowcontrols_outer { 
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
.b-slideshowcontrols { 
    position:relative;
    left:50%;
}
.h-slideshowcontrol { 
    float:left; white-space:nowrap; width:14px; height:14px; cursor:pointer; float: left; position:relative; margin-right: 2px;
    background:transparent url('../img/slideshowcontrol-inactive.png') no-repeat; 
}

Answer 1

try :

div is block by default.

.h-slideshowcontrol  {   float: left; width: 14px; height: 14px; }