Ярлык, не создающий пространство в ячейке таблицы

Question

Так что у меня проблема с меткой в ​​ячейке таблицы, не создающей места для себя и вместо этого как-то стоящей за ее родным братом, но занимающей пространство ВНУТРИ своего родного брата?

Я создал JSFiddle, чтобы показать вам, что я имею в виду: http://jsfiddle.net/8yzLP/

Там есть ярлык, который внутри DIV, который находится внутри ячейки таблицы, но это время скрыт это двойников DIV.

Вот структура разметки:

<table> 
    <tr> 
     <td class="trip-finder-table-cell"> 
      <div class="trip-finder-sort-by-container"> 
       <label>Sort By</label> 
       <div class="selectList_container trip-finder-sort-by-select" tabindex="0" style="position: relative;"> 
        <p class="selectList_value"> 
         <span class="selectValue_content" style="cursor: pointer; display: block; text-align: left;">Sort Option</span> 
         <span class="select-carat" style="cursor: pointer;"></span> 
        </p> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

CSS-это приходит со всего мира, но я включил элементы, необходимые для воссоздания проблемы в скрипку JS. Они заключаются в следующем:

td.trip-finder-table-cell { 
width: 17%; 
padding: 15px 1.25%; 
vertical-align: top; 
position: relative; 
} 

td.trip-finder-table-cell > div[class*=trip-finder] { 
position: relative; 
} 

td.trip-finder-table-cell > div > label:not([for]) { 
display: inline; 
float: left; 
line-height: 30px; 
margin-right: 5px; 
} 

.selectList_value { 
padding: 4px 0 4px 10px; 
width: 100%; 
} 

.select-carat { 
display: block; 
width: 25px; 
height: 25px; 
position: absolute; 
float: right; 
right: 3px; 
top: 2px; 
background: transparent url('../img/global/forms/select-carat.png') no-repeat center center; 
} 

.selectList_options { 
overflow: hidden; 
max-height: 250px; 
overflow-y: auto; 
position: relative; 
top: 5px; 
background: #fff; 
background: rgba(255,255,255,.9); 
border: 1px solid #ccc; 
} 

.selectList_container { 
min-width: 110px; 
border: 1px solid #cccccc; 
background: #fcfcfc; 
position: relative; 
} 

Я пробовал все, что я не могу думать, чтобы получить эту работу, как и ожидалось (с меткой слева, и собрата справа), но независимо от того, что я пытаюсь это просто не происходит. Может быть, кто-то может быть любезным, чтобы помочь мне?

Answer 1

Ваш плавучий некоторые элементы и некоторые из них не проверить ур положение: ххх и поплавок: ххх линии

основном эти линии должны идти

.select-carat { 
position: absolute; 
float: right; 
right: 3px; 
top: 2px; 
} 

td.trip-finder-table-cell > div > label:not([for]) {float: left;}