Third element goes on next line on IE - css

Question

So I have a header bar that's something like [IMG______TITLE______IMG]
I have something like this, where all 3 elements are in 1 div:
#left_image {
display:block;
width:80px;
height:100%;
float:left;
}
#middle_div {
width:1030px;
height:100%;
text-align:center;
display:inline-block;
}
#left_image {
display:block;
width:80px;
height:100%;
float:right;
}
But for some reason, only on IE, the last picture is on the next line, like:
[IMG_______title__________]
[______________________IMG]
You can see the last image is still going to the far right, but for some reason outside of the containing div...Any idea how to properly horizontally align these?

Answer 1

You can do this without floats, and some simple positioning:
<div class="wrapper">
<div class="left">Left things</div>
<div class="middle">Middle things</div>
<div class="right">Right things</div>
</div>
.wrapper {width:100%;background-color:#eee;position:relative;}
.left,.middle,.right {display:inline-block;padding:10px;}
.middle {text-align:center;}
.right {position:absolute;right:0;}
Here's a link to a demo: http://jsfiddle.net/76t8ca7h/
Updated fiddle: http://jsfiddle.net/76t8ca7h/3/
and new css:
.wrapper {width:100%;min-width:100%;background-color:#eee;padding:0;margin:0;overflow:hidden;}
.left,.middle,.right {display:inline-block;vertical-align:top;float:left;}
.middle {text-align:center;width:60%;}
.left,.right {width:20%;background-color:#ccc;}
.right {float:right;}