IE 11 CSS Float is not inline
<p>In Chrome two divs floated left are inline and the right size.</p>

<p>However in Internet Explorer 11 (IE11) they are no longer inline and the logo seems to be larger in height.</p>

<p>I have posted the code <a href="https://jsfiddle.net/3e8bwqaf/" rel="nofollow">https://jsfiddle.net/3e8bwqaf/</a></p>

<pre><code>#logoBar, #siteHeaderBar {
    float: left;
}
</code></pre>

<p>I tried a bunch of clears and overflow on different elements but I still was unable to get it to look right on IE11</p>

<p><a href="http://i.stack.imgur.com/Nj2iZ.jpg" rel="nofollow">Chrome on top, IE11 on bottom</a></p>

<p>How would you fix the float where it would not be stacked on top of each other?</p>