CSS alternative for display:box for IE and Opera?

Question

I am using display:box for a flexible width div with three boxes of equal size and with equal spacing. This works fine for Firefox, Safari and Chrome, but not in IE and Opera. I am wondering what the best alternative method for IE and Opera would be. Here is the display:box CSS:

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    width: 100%;
}

.box1, .box2, .box3 {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 0;
}

.box2, .box3 {  
    margin-left: 20px;
}

And the HTML:

<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

You can see it in action here.

I'd be glad to hear of an alternative method for achieving a similar result in IE and Opera.

Thanks,

Nick

Aude

It is worth pointing out that Opera now supports Flexbox with the standard spec: display: flex; and IE10 supports it with the slightly older version: display: flexbox; IE11 will use the standard syntax (same as Opera, and Firefox 22+) – Replicate

Answer 1

Flexie implements support for this in browsers that do not natively support display: box;.

Osteen

Thanks. That looks like what I am after and I have used the flexie test page in Opera and IE and can see that it works OK. From the source code of this test page it seems like I only need to add jQuery and flexie.js to my page to get this working, but I have done so and it's not working on my pages. Are you aware of anything else I need to do? – Aude

I have also implemented my own test page, which as you can see, if you look in Opera and IE, isn't working correctly. It should have three boxes side-by-side. – Aude

I have received a message from the developer of Flexie, stating "Flexie can only read styles via <link /> element. Can't do <style> blocks, sorry." So I presume that this is why it is not working, though I don't understand what he means and I haven't heard back from him! – Aude

This means that for Flexie to work on your styles, they must be added to your page using <link rel="stylesheet" href="filename.css">. – Osteen