Проблема с CSS свойств поплавка

Question

Эти коды я использую: http://jsfiddle.net/VaKSG/

.brs_top_bar{ 
    width: 900px; 
    height: 40px; 
    background: rgb(27, 124, 124); 
    border-bottom: 1px solid rgb(20, 92, 92); 
    color: white; 
} 
.brs_top_search{ 
    width: 201px; 
    height: 40px; 
    background: rgb(22, 105, 105); 
    display: inline-block; 
} 
.brs_top_show_hide{ 
    height: 40px; 
    width: 10px; 
    background: rgb(78, 218, 218); 
    display: inline-block; 
} 
.brs_top_pages_info{ 
    color: white; 
    font-weight: bold; 
    display: inline-block; 
    line-height: 30px; 
    vertical-align: top; 
} 
.brs_top_pages_but{ 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
    line-height: 28px; 
    text-align: center; 
    height: 28px; 
    width: 28px; 
    background: rgb(35, 156, 156); 
    border: 1px solid rgb(31, 139, 139); 
    display: inline-block; 
} 
.brs_top_pages{ 
    margin: 5px; 
    height: 30px; 
    display: inline-block; 
    vertical-align: top; 
} 
.floating{ 
    float: right; 
    position: relative; 
} 

---

<div class="brs_top_bar"> 
    <div class="brs_top_search"></div> 
    <div class="brs_top_show_hide"></div> 
    <div class="brs_top_pages floating"> 
     <div class="brs_top_pages_info">1 - 10 of 300</div> 
     <a href="" title="" class="brs_top_pages_but"><</a><a href="" class="brs_top_pages_but" title="">></a> 
    </div> 
</div> 

Он работает нормально, в ссылке, но в моей локальной среде, плавающий элемент идет под другим элементы в том же контейнере, как показано на рисунке:

Я пробовал почти все, чтобы все было правильно, но не работало. Я использую Chrome.

Answer 1

Попробуйте ввести код для css. Просто добавьте float:left в оба класса.

.brs_top_search{ 
    width: 201px; 
    height: 40px; 
    background: rgb(22, 105, 105); 
    display: inline-block; 
    float: left; 
} 
.brs_top_show_hide{ 
    height: 40px; 
    width: 10px; 
    background: rgb(78, 218, 218); 
    display: inline-block; 
    float: left; 
}