Дисплей CSS3: table-cell & float?

Question

У меня есть длинный контейнер для контейнера, установленный на display:table и &. В нем установлены divs display:table-cell; vertical-align: middle.

Я очень доволен результатами вертикального выравнивания, но:

• Я не знаю ширину этих 3 див,
• Я хочу, чтобы один из них, чтобы быть на самом правом (за вычетом пробега),
• float: right не работает с display: table-cell.

Вот пример (я хочу поплавать золотыми дивизами справа). Я не могу использовать JS. Мне нужно, чтобы он работал в IE7 + или IE8 +, если это невозможно для IE7. Любые подсказки/идеи?

http://jsfiddle.net/cZ7Th/2/

Answer 1

Я не знаю, если это работает с IE7 или 8, но я сделал это путем объединения width: 1px, width: auto и white-space: nowrap. Определите все ячейки в макете таблицы как ширину в один пиксель, но запретите обертывание; затем добавьте пустую простую ячейку до тех, которые вы хотите плавать вправо.

http://jsfiddle.net/wZ96P/

Кажется работать с современными версиями Chrome, Opera, Firefox и IE, по крайней мере.

Answer 2

Для этого вертикального выравнивания не работает:

<div style="display: table-cell; vertical-align: middle; float: right">...</div> 

Но для этого он работает для меня:

<div style="float: right"> 
    <div style="display: table-cell; vertical-align: middle">...</div> 
</div> 

Answer 3

When float!=none then display = block