Question

I have a div with some span tags inside that are containers for input buttons.
Now I want my last button to always float to the right. Sometimes the container divs width is overflown (the container’s width is more like a min-width).
In FF it works almost nice with float:right, but in IE8 it renders it to the right of the whole page, not to the right of my container.

How can I float this last button (which is a “Back” button to the right of my div container) so:
1. It will always stay on the right (no matter if the div’s width is overflown or not)
2. It would work in both FF and IE8.
3. Notice that in FF the 5th button gets rendered closer to the 4th that the 4th to the 3rd. Is there another way to do this which does not have this problem or should I just use a left property to fix it?

Here is a sample fiddle . (check it out in IE8)

Summary: I want the float:right to consider whether the container divs width is stretched or not. (If stretched point after the last span )

Answer 1

I have found a solution. I am not using float: right but position:absolute and right:0 which has the same effect it the parent container’s position is set to relative.