Q:

Absolute position of a div inside a div without absolute position

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>

A:

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>

