Absolute position of a div inside a div without absolute position - html

Question

I made a fiddle of my problem to easily see it:
https://jsfiddle.net/6jzb09nd/
I have a series of nested divs. And the very bottom of the nest i want a div absolutely positioned so I can center it inside it's parent div.
It works find when it's the only thing on the page but when I start adding other elements the positioning gets all messed up.
In the fiddle if you uncomment the "//float:left", you can see the positioning break.
Here's the code:
.col-sm-2,
.col-sm-10 {
//float:left;
}
.leftnumouter {
color: #fff;
font-size: 4.5vw;
height: 4.5vw;
width: 4.5vw;
float: left;
background: #393;
position: relative;
border: 0px solid black;
}
.rightnumouter {
color: #fff;
font-size: 4.5vw;
height: 4.5vw;
width: 4.5vw;
float: left;
background: #C33;
position: relative;
border: 0px solid black;
}
.leftnuminner {
color: #000;
position: absolute;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rightnuminner {
color: #fff;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lefttextouter {
background: #3C9;
border-radius: 0 1.5vw 1.5vw 0;
color: #000;
font-size: 3vw;
height: 3.2vw;
text-transform: uppercase;
float: left;
padding: 0 0 0 0;
position: relative;
}
.righttextouter {
background: #C69;
border-radius: 0 1.5vw 1.5vw 0;
color: #000;
font-size: 3vw;
height: 3.2vw;
text-transform: uppercase;
float: left;
padding: 0 0 0 .2vw;
position: relative;
}
.lefttextinner {
color: #000;
margin: 0 .5vw 0 0;
}
.righttextinner {
color: #000;
margin: 0 1vw 0 0;
}
<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
<div class="preview">
<div class="databubble">
<div class="leftnumouter">
<div class="leftnuminner">5
</div>
</div>
<div class="lefttextouter">
<div class="lefttextinner">Sales
</div>
</div>
</div>
<div class="databubble">
<div class="rightnumouter">
<div class="rightnuminner">3
</div>
</div>
<div class="righttextouter">
<div class="righttextinner">Orders
</div>
</div>
</div>
</div>
</div>

Answer 1

Since an element with float collapse to its content, you need to give it a width
.col-sm-2,
.col-sm-10 {
float:left;
width: 100%;
}
.leftnumouter {
color: #fff;
font-size: 4.5vw;
height: 4.5vw;
width: 4.5vw;
float: left;
background: #393;
position: relative;
border: 0px solid black;
}
.rightnumouter {
color: #fff;
font-size: 4.5vw;
height: 4.5vw;
width: 4.5vw;
float: left;
background: #C33;
position: relative;
border: 0px solid black;
}
.leftnuminner {
color: #000;
position: absolute;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rightnuminner {
color: #fff;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lefttextouter {
background: #3C9;
border-radius: 0 1.5vw 1.5vw 0;
color: #000;
font-size: 3vw;
height: 3.2vw;
text-transform: uppercase;
float: left;
padding: 0 0 0 0;
position: relative;
}
.righttextouter {
background: #C69;
border-radius: 0 1.5vw 1.5vw 0;
color: #000;
font-size: 3vw;
height: 3.2vw;
text-transform: uppercase;
float: left;
padding: 0 0 0 .2vw;
position: relative;
}
.lefttextinner {
color: #000;
margin: 0 .5vw 0 0;
}
.righttextinner {
color: #000;
margin: 0 1vw 0 0;
}
<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
<div class="preview">
<div class="databubble">
<div class="leftnumouter">
<div class="leftnuminner">5
</div>
</div>
<div class="lefttextouter">
<div class="lefttextinner">Sales
</div>
</div>
</div>
<div class="databubble">
<div class="rightnumouter">
<div class="rightnuminner">3
</div>
</div>
<div class="righttextouter">
<div class="righttextinner">Orders
</div>
</div>
</div>
</div>
</div>
Or set up a few more rules to make it all behave
.preview {
overflow: hidden;
white-space: nowrap;
}
.databubble {
display: inline-block;
}
Sample
.col-sm-2,
.col-sm-10 {
float:left;
}
.col-sm-2:after,
.col-sm-10:after {
content: '';
clear: both;
display: block;
}
/* added these 2 rules */
.preview {
overflow: hidden;
white-space: nowrap;
}
.databubble {
display: inline-block;
}
.leftnumouter {
color: #fff;
font-size: 4.5vw;
height: 4.5vw;
width: 4.5vw;
float: left;
background: #393;
position: relative;
border: 0px solid black;
}
.rightnumouter {
color: #fff;
font-size: 4.5vw;
height: 4.5vw;
width: 4.5vw;
float: left;
background: #C33;
position: relative;
border: 0px solid black;
}
.leftnuminner {
color: #000;
position: absolute;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rightnuminner {
color: #fff;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lefttextouter {
background: #3C9;
border-radius: 0 1.5vw 1.5vw 0;
color: #000;
font-size: 3vw;
height: 3.2vw;
text-transform: uppercase;
float: left;
padding: 0 0 0 0;
position: relative;
}
.righttextouter {
background: #C69;
border-radius: 0 1.5vw 1.5vw 0;
color: #000;
font-size: 3vw;
height: 3.2vw;
text-transform: uppercase;
float: left;
padding: 0 0 0 .2vw;
position: relative;
}
.lefttextinner {
color: #000;
margin: 0 .5vw 0 0;
}
.righttextinner {
color: #000;
margin: 0 1vw 0 0;
}
<div class="col-sm-2"> Blah
</div>
<div class="col-sm-10">
<div class="preview">
<div class="databubble">
<div class="leftnumouter">
<div class="leftnuminner">5
</div>
</div>
<div class="lefttextouter">
<div class="lefttextinner">Sales
</div>
</div>
</div>
<div class="databubble">
<div class="rightnumouter">
<div class="rightnuminner">3
</div>
</div>
<div class="righttextouter">
<div class="righttextinner">Orders
</div>
</div>
</div>
</div>
</div>