CSS elements wont stack side by side in IE 8

Question

I have a following code to display some contact info on my website.

HTML

<div class="contactinfo">

<div class="phoneicon">
<a href=""><img src="../images/phoneicon.png" alt="Phone"></a>
</div>

<div class="navdivide1">
<a href=""><img src="../images/navdivide.png" alt="Email"></a>
</div>

<div class="emailicon">
<a href=""><img src="../images/emailicon.png" alt=""></a>
</div>

</div>

CSS

.contactinfo {
display: flex;
float: right;
position: inherit;
right: 0;
top: 0px;
}

.phoneicon
{
}

.emailicon
{
padding-right: 10px;
}

.navdivide
{
}

It works fine in IE11, but in IE 8 the elements stack one above the other.

I am thinking maybe the "display: flex;" is not supported in IE8?

How can I get these CSS elements to align side by side?

Thanks

Answer 1

display: flex is definitely not supported in IE8. I suggest the website caniuse.com as a great resource for this type of information, here is the relevant page for your problem: http://caniuse.com/flexbox

Instead, you will probably want to use css floats. Something like this might work for you:

.phoneicon,
.emailicon,
.navdivide {
    float: left;
}