float next sibling left of previous sibling

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

Answer 2

I can't remember if this trick works in IE6.

.wrap{float:left;}
.next {float:left;}
.prev {overflow:hidden}

I don't think you will need .wrap{float:left;}

<div class="wrap">
    <div class="next">next (1)</div>
    <div class="prev">previous (2)</div>
</div>

This way .prev gets the width left after .left is floated.

Demos:

With wrap floating: http://jsbin.com/exevis

Without wrap floating: http://jsbin.com/opehig

Answer 3

Just keep in mind that the direction property is meant to indicate text direction for languages like Hebrew as opposed to laying out content. While kizu's answer is very clever when dealing with the monstrosity of ie6, I recommend you wrap it in a conditional and be sure to document the hack even if you're the only developer on page. All it takes are a couple of months and maybe a few martinis to boot, and this implementation will appear to be quite nonsensical.