CSS to centre div in gap on right - html

Question

I'm struggling trying to set up a really basic layout with CSS. I've created the following jsFiddle to help explain (code is copied below).
http://jsfiddle.net/drmrbrewer/10jq4zka/1/
Basically, what I want is for the first, second and third divs to be on one row, with the first and second divs positioned sequentially as far to the left as possible, and for the third div to be centred in the space that remains to the right of the second div. The row should fill 100% horizontally, so that when the window is resized the third div will remain centred within its space to the right of the second div, while the first and second divs remain static.
#outer-container {
position: absolute;
width: 100%;
}
#inner-container {
position: relative;
width: 400px;
}
#one {
width: 200px;
text-align: center;
float: left;
}
#two {
width: 200px;
text-align: center;
float: left;
}
#three {
width: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="outer-container">
<div id="inner-container">
<div id="one">one</div>
<div id="two">two</div>
</div>
<div id="three">three</div>
</div>

Answer 1

I am not sure why you need the inner-container. You can achieve what you are looking for without using the inner-container (if the html is editable, ofcourse).
Let me explain it instead of just giving the code :
You can float the first two div's left. This will align them right next to each other. You can then add a text-align: center on the parent and that will take care of center aligning the third div.
You can check out the JSFiddle link http://jsfiddle.net/b5jk1d6k/ so that you can resize and see that the third div is center aligned on resizing the browser window.
div {
display:inline-block;
height: 100px;
width: 50px;
}
div.outer-container {
display: block;
text-align: center;
width: 100%;
}
.one {
background-color:orange;
float:left;
}
.two {
background-color:red;
float:left;
}
.three {
background-color:yellow;
}
<div class="outer-container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
Hope this helps!!!

Answer 2

Adding on to Satwik Nadkarny's Answer, if you know that div 1 and 2 are set to 200px you can set 3 to the remaining by giving the width of div 3 too:
width: calc (100% - 400px);
Which just gets the width of the browser window and subtracts the width of both divs 1 and 2.
div {
display:inline-block;
height: 100px;
width: 50px;
}
div.outer-container {
display: block;
text-align: center;
width: 100%;
}
.one {
background-color:orange;
float:left;
width: 200px;
}
.two {
background-color:red;
float:left;
width: 200px;
}
.three {
background-color:yellow;
width: calc(100% - 400px);
}