CSS3 display: table-cell & float?

Question

I've got a long div container set to display:table and & divs within it set to display:table-cell; vertical-align: middle.

I'm really happy with the results of vertical alignment, but:

• I don't know the width of these 3 divs,
• I want one of them to be on the very right side of div container (minus padding of course),
• float: right doesn't work with display: table-cell.

Here's an example (I want to float the golden divs to the right). I can't use JS. I need it to work in IE7+, or IE8+ if impossible for IE7. Any hints / ideas?

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

Answer 1

I don't know if this works with IE7 or 8, but I have done this by combining width: 1px, width: auto and white-space: nowrap. Define all cells in the table layout as one-pixel wide, but prevent wrapping; then add an empty padding cell before the ones you want to float right.

http://jsfiddle.net/wZ96P/

Seems to work with the modern versions of Chrome, Opera, Firefox, and IE, at least.

Answer 2

For this vertical align doesn't work:

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

But for this it works for me:

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

Answer 3

When float!=none then display = block