Problème avec les divs flottants dans IE8

Question

Je veux faire deux blocs stand côte à côte. Dans Opera, Chrome et Firefox, j'obtiens le résultat attendu avec le code que j'utilise. Mais IE8 refuse de l'afficher correctement. est ici capture d'écran IE8: http://ipicture.ru/upload/100405/RCFnQI7yZo.png et capture d'écran Chrome (la façon dont il devrait ressembler): http://ipicture.ru/upload/100405/4x95HC33zK.png

Voici mon HTML:

<div id="balance-container"> 
    <div id="balance-info-container"> 
     <p class="big" style="margin-bottom: 5px;"> 
      <strong> 
       <span style="color: #56666F;">Баланс:</span> 
       <span style="color: #E12122;">-2312 руб</span> 
      </strong> 
     </p> 
     <p class="small minor"><strong>Овердрафт 1000 руб. до 1.05.10</strong></p> 
    </div> 
    <div id="balance-button-container"> 
     <button id="pay-button" class="green-button">Пополнить счет</button> 
    </div> 
</div> 

et CSS:

#balance-container { 
    margin-left: auto; 
    margin-right: auto; 
    width: 390px; 
} 
#balance-info-container, #balance-button-container { 
    float: left; 
} 
#balance-info-container { 
    width: 250px; 
} 

Answer 1

#balance-container { 
    margin: 0 auto 0 auto; 
    width: 390px; 
} 
#balance-info-container { 
    width: 250px; 
    float:left; 
} 
#balance-button-container,#pay-button{ 
    width:140px; 
    float:left; 
} 

Cela devrait donner à vos conteneurs côte-à-côte.

Answer 2

Il est probablement quelque chose à faire avec les largeurs. #balance-info-container ne semble pas aller sur la droite, donc il glisse vers le bas.
Pour tester que c'est le problème, donnez #balance-containerwidth:450px; et actualisez.

Si tel est effectivement le problème, vous pouvez utiliser les outils de développement d'IE pour analyser la largeur de chacun des conteneurs enfants, et les réduire ou agrandir suffisamment le parent pour qu'ils correspondent.