(CSS) Align div elements from center to left

Question

I am trying to center one div element and make others float to the left from him like this:

In this code width and height is set to px but in my its in %. So I don't know where the center is. So it has to change with different resolution. I don't want to put it in another div and center that because it center both divs and I want only yellow to be in center.

Is there any solution besides putting another empty div on the left side with same height as green has and making him invisible?

.container{
    background-color:#34495e;
    width: 500px;
    height: 200px;
    padding: 10px;
}

.in-center{
    background-color:#f1c40f;
    width: 40%;
    height: 100%;
    display: inline-block;
}

.to-left{
    background-color:#2ecc71;
    width: 20%;
    height: 100%;
    display: inline-block;
}

<div class="container">
        <div class="in-center"></div>
        <div class="to-left"></div>
</div>

Answer 1

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  background-color: #34495e;
  width: 80%;
  height: 200px;
  text-align: center;
  position: relative;
}
.in-center {
  background-color: #f1c40f;
  width: 40%;
  height: 100%;
  display: inline-block;
}
.to-left {
  background-color: #2ecc71;
  width: 20%;
  height: 100%;
  display: inline-block;
  position: absolute;
}

<div class="container">
  <div class="in-center"></div>
  <div class="to-left"></div>
</div>