Bootstrap2 tab navigation: tab content div position

Question

Я не понимаю, почему DIV с ID = "test1" перекрывается с левой навигацией вкладок, но div с классом = "tab-content" не работает.

this is my example

<div style="height: 160px;overflow: hidden;"> 
<div class="tabbable tabs-left" > 

    <ul class="nav nav-tabs"> 
     <li class="active"> 
      <a href="#tab1" data-toggle="tab">tab1</a> 
     </li> 

    </ul> 
    <div id="test1"> 
<div class="tab-content" > 
    <div id="tab1" class="tab-pane active"> Content tab1 </div> 
</div> 
    </div> 
</div> 

Answer 1

Вкладка-контент имеет свойство CSS overflow: auto. Вкладки - float: left, и если следующие элементы: overflow: auto, div автоматически фиксируется на ширину, оставленную элементом, который плавает. Он обычно используется для разделения в двух столбцах.

С этих двух примеров должно быть ясно:

С overflow: auto: http://jsfiddle.net/eugip9/tVLgj/

<div> 
    <div class="a" style="width: 20%; float: left;">Whatever</div> 
    <div class="b" style="overflow: auto">A very long text ... </div> 
</div> 

Без overflow: auto: http://jsfiddle.net/eugip9/HVPhD/

<div> 
    <div class="a" style="width: 20%; float: left;">Whatever</div> 
    <div class="b">A very long text ... </div> 
</div>