Question

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

Answer 1

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-blocks 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:

1. Make everything inline-blocks, so it would work in inline flow.
2. Reverse the flow on the wrapper.
3. Return the flow to the normal ltr mode in the children.
4. It’s done 🙂