Question

I have some HTML that a 3rd party API builds, so I have no control of the output. The only thing I can change is the CSS. I would prefer not to use JavaScript, if possible.

What I’m trying to do is swap 2 elements using float:left on the second, so it’s displayed before the first one. This works well on modern browsers, but causes the “swapped” element to move to the second line on older IE browsers (specifically 6 and 7, and IE in compatibility mode).

jsFiddle Example

HTML (cannot change)

<div class="wrapper">
    <a class="page">Page: &nbsp;</a>
    <a class="previous">Prev</a>
    <span>
        <a>1</a>
        <a>2</a>
    </span>
    <a class="next">Next</a>
</div>​

CSS

.wrapper{
    line-height:36px;
}
.wrapper span, .page{
    float:left;
}
.wrapper span a, .page{
    display:inline-block;
}
.wrapper span a{
    width:20px; 
}
.previous, .next{
    width:30px;
    display:inline-block;
}

Modern Browser Screenshot

Internet Explorer Screenshot

Answer 1

The issue turned out to be a bug with how IE6 and IE7 (not present in IE8) handle float:right; within a left-aligned element. Instead of simply positioning the element on the closest point to the left, past any content (as modern browsers do), IE6 and IE7 position the element in the farthest right point possible (which, isn’t that much different in terms of definition, but makes a huge difference in cases like this).

Anyway, to get past this limitation, float:right; could not be used as a solution. As there was no way of knowing (without JavaScript, which the OP stated should not be used) what the width of .content span was (variable number of pages), a static width could not be used on .wrapper. Instead, the “Next” and “Prev” link elements had to be “discarded” until the end, then positioned absolutely (relative to .wrapper) after the width of .wrapper had been figured out.

jsFiddle Example

The Magical CSS

.wrapper {
    float:left; /* Can be 'display:inline;' instead, but this makes it possible to treat this as "block" */
    clear:left; /* Can be discarded if 'float:left;' isn't used */
    position:relative; /* Keeps 'next'/'prev' contained */
}
.page, span {
    float:left; /* Positions 'Page:' and page numbers on left */
}
.page, span a {
    padding-right:.5em; /* Can change this to whatever */
}
.previous {
    position:absolute;
    right:-6em; /* Width (including padding, borders, etc) of .previous and .next */
    width:2.5em;
    padding-right:.5em;
}
.next {
    position:absolute;
    right:-3em; /* Width (including padding, borders, etc) of .next */
    width:2.5em;
    padding-right:.5em;
}