отличается позиционирование между Chrome/Firefox и IE

Question

У меня есть следующий макет: -

HTML: -

<header> 
    <div class="content-wrapper"> 
     <div id="headerContainer"> 
      <div class="headerProfileNotifications"> 
       <img src="Images/" alt="notification" /> 
      </div> 
      <div class="headerProfilePhoto"> 
       <img src="Images/" alt="profile_photo" /> 
      </div> 
      <div class="headerProfileDetails"> 
       <div class="headerProfileName">John Smith</div> 
       <div class="headerProfileEmail">john.smith@someemail.co.uk</div> 
      </div> 
     </div> 
    </div> 
</header> 

и CSS: -

header { 
    padding-bottom: 5px; 
    } 

    #headerContainer { 
    height: 33px; 
    background-position: 10px 2px; 
    padding-top: 2px; 
    } 


    .headerProfileNotifications { 
    float: right; 
    height: 22px; 
    width: 29px; 
    padding-right: 4px; 
    margin: 5px; 
    } 

    .headerProfilePhoto { 
    float: right; 
    height: 33px; 
    width: 22px; 
    margin: 5px; 
    } 


    .headerProfileDetails { 
    float: right; 
    padding-right: 4px; 
    font-size: 11px; 
    } 

    .headerProfileName { 
    margin-top: 2px; 
    float: right; 
    } 


    .headerProfileEmail { 
    margin-top: 0px; 
    } 

JSFiddle

однако он выглядит так же в Chrome/Firefox, и выглядит так, как должно быть, но в IE, его отображение по-разному.

Что css я должен обратиться к IE чтобы выглядеть точно так же, как Chrome/Firefox?

Спасибо за вашу помощь и время

Answer 1

Это будет делать трюк:

.headerProfileEmail { 
    clear:both; 
    float:right; 
    margin-top: 0px; 
    }