Charles Okwuagwu Charles Okwuagwu - 4 months ago 18
CSS Question

strange absolute positioning CSS Issues

I've been having this absolute positioning CSS issue.

IE 10+ works just fine but Chrome gets distorted as shown in the images below:

Any help please.

(this distortion seems to have started with chrome 52 update)

IE

IE

Chrome

chrome

HTML

<div class="widget style1 navy-bg">
<div class="row">
<div class="col-xs-6 text-left">
<h4>New Contacts</h4>
<h2 class="font-bold">707</h2>
<div class="speed_l">
<h2>39</h2>
<small>/hr</small>
</div>
</div>
<div class="col-xs-6 text-right">
<h4>Visitors Today</h4>
<h2 class="font-bold">2129</h2>
<div class="speed_r">
<h2>387</h2>
<small>/hr</small>
</div>
</div>
</div>
</div>


CSS

.widget {
border-radius: 5px;
padding: 15px 20px;
margin-bottom: 10px;
margin-top: 10px;
}

.widget.style1 h2 {
font-size: 40px;
}

.widget h2,
.widget h3 {
margin-top: 5px;
margin-bottom: 0;
}

.speed_l {
display: inline-flex;
padding-left: 15px;
margin-top: 5px;
}

.speed_l small {
position: absolute;
top: 87px;
font-size: 14px;
color: #def;
}

.speed_l h2 {
font-size: 30px !important;
}

.speed_r {
display: inline-flex;
padding-right: 12px;
margin-top: 5px;
}

.speed_r small {
position: absolute;
top: 87px;
font-size: 14px;
color: #def;
}

.speed_r h2 {
font-size: 30px !important;
}


After Applying suggested solution

enter image description here

Answer

Perhaps this is what you want:

I have updated the code.

.speed_l {

    display: inline-flex;
    padding-left: 15px;
    margin-top: 5px;
}

    .speed_l small {
        position: relative;
        margin:5px;
        font-size: 14px;
        color: #def;
    }

    .speed_l h2 {
        font-size: 30px !important;
    }

.speed_r {
    display: inline-flex;
    padding-right: 12px;
    margin-top: 5px;
}

    .speed_r small {
        position: relative;
        margin:5px;
        font-size: 14px;
        color: #def;
    }