CSS result displaying differently in browsers

Question

I'm writing a HTML page with some data in span. I tried to align the contents in the span. It is working fine in chrome, but when coming to FireFox, it is displaying differently.

HTML

<div class="header" id="header">
<span class="totalTime">Status: (Worked/Total) - 23/38</span>
<span class="effeciency">Effeciency : 15.05</span>
<span class="links">
   <span class="casesLink"><a href="index.jsp">Allocated Cases</a></span>
   <span class="reportsLinks"><a href="UsersCounts.jsp">User Counts</a></span></span>
</div>

CSS

.header {
    position: fixed;
    top: 0em;
    left: 0px;
    width: 100%;
    padding-bottom: 3em;
    border-bottom: 1px solid black;
    background: #ff8800;
    color: white;
    font-weight: bold;
}

span.totalTime {
    display: block;
    float: left;
    margin-left: 1.5em;
    position: absolute;
    top: 30px;
}

span.effeciency {
    display: block;
    float: right;
    width: auto;
    margin-right: 2em;
    top: 30px;
    position: relative;
}

span.links {
    display: flex;
    width: 200px;
    height: 100%;
    margin: 0 auto;
    top: 30px;
    position: relative;
}

.links>span {
    display: inline-table;
    padding: 1em;
    padding-bottom: 0em;
    padding-top: 0em;
}

I've created a fiddle and can be found here .

Here is the working fiddle full screen output. To see the correct result, paste this in both Chrome and Firefox Browsers.

https://jsfiddle.net/pwg69xxu/1/embedded/result/

Answer 1

Here is the updated code, now you can work on it without facing issues:

<style>
body {
    margin: 0;
    padding: 0
}
.header {
    width: 100%;
    height: 55px;
    background: #ff8800;
    padding: 20 0;
    border-bottom: 1px solid #000;

}
.left {
    float: left;
    width: 31%;
    margin-left: 13px;
    font-weight:bold;
    color:#fff;
}
.right {
    float: right;
    width: 33%;
    margin-right: 13px;
    text-align: right;
    font-weight:bold;
    color:#fff;
}
.center {
    float: left;
    width: 32%;
}
.header ul {
    list-style: none;
    width: 300px;
    margin: 18px auto;
}
.header ul li {
    float: left;
    margin-right: 20px;
}
</style>
<div class="header">
<div class="left"><p>Status: (Worked/Total) - 23/38</p></div>
<div class="center">
<ul>
<li><a href="index.jsp">Allocated Cases</a></li>
<li><a href="UsersCounts.jsp">User Counts</a></li>
</ul>
</div>
<div class="right"><p>Effeciency : 15.05</p></div>
</div>

Answer 2

Try to add code below to prevent strings from wrapping to another line:

span.links a
{
    white-space: nowrap;
}

Answer 3

Try this:

span.links {
    display: inline-block;
    height: 100%;
    margin: 0 auto;
    top: 10px;
    position: relative;
    width: 100%;
    text-align: center;
}

jsFiddle

because you set width for span.links . I removed and give it 100% width and text-align: center and also display: inline-block . now it works on all major browser such Chrome or FF.