float next sibling left of previous sibling

css, css-float, html, internet-explorer-6

Solution

Here you go: http://result.dabblet.com/gist/2489753

You can't use floats there, 'cause IE have a nasty bug, where it stretches the container that is floated to left (or is `inline-block`) if it contains the `float: right;`.

However, there is a rarely-used property `direction`, that can be used for such layouts: it's fully cross-browser and you can use it with `inline-block`s for the best effect.

So, for your case the code would be this:

.wrap{
    display: inline-block;
    direction: rtl;
    }
.prev,
.next {
    display: inline-block;
    direction: ltr;
    }

But the `display: inline-block` don't work for IE from the box, so you need to hack it by making it inline but with hasLayout, so add those to IE only in conditional comments:

.wrap,
.prev,
.next {
    display: inline;
    zoom: 1;
    }

That's it!

Step by step:

- Make everything inline-blocks, so it would work in inline flow.

- Reverse the flow on the wrapper.

- Return the flow to the normal ltr mode in the children.

- It's done :)

Problem

I don't know how to or if this can be done with internet explorer 6. I am trying to float the next sibling to the left of the previous sibling This is what im doing and it displays correctly with chrome 6 , opera 9 and firefox 1+. What the issue with IE6 is that the `previous (2)` is floated to the far right (where it would be best to be beside to `next (1)` that is on the left side of the page. ``` .wrap{float:left;} .prev {float:right;} .next {float:left;} <div class="wrap"> <div class="prev">previous (2)</div><div class="next">next (1)</div> </div> ``` If it can be done and you know how to do it i will give a bounty of 250 points

Original source