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:
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?
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.
Seems to work with the modern versions of Chrome, Opera, Firefox, and IE, at least.