Element Width Between Float Elements - css

Question

I'm a noob to web dev and have a question:
I have a container that contains 4 inline elements: two buttons floating to the left, one button floating to the right, and a search box in the middle. The buttons have predefined dimensions (percentages of the container). I am trying to avoid giving the search box a predefined width, instead I would like the width of the search box to occupy as much space as it can between the floating elements on each side (refer to photo) such that it is more dynamic.
Is there any width setting technique to achieve this? I've tried adding all 3 buttons in HTML before adding the search box and then I've tried using the margin-left and margin-right value to hopefully stretch the search box. I've had no luck with this. Any help?
HTML
<div class = "SearchBox">
<input type="image" src="./Home Page Resources/ChapterIcon.png" onclick="alert('Trigger Upload Page')">
<input type="image" src="./Home Page Resources/UserSearchIcon-2.png" onclick="alert('Trigger Upload Page')">
<input type="image" src="./Home Page Resources/SearchIcon-2.png" onclick="alert('Trigger Upload Page')">
<input type="text" name="search">
</div>
CSS
.SearchBox {
display: inline-block;
position: relative;
float: right;
min-width: 35%;
height: 40px;
border: thin solid #80501F;
background-image: url("../Home Page Resources/WoodBackground-2.jpg");
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.SearchBox input:nth-of-type(1) {
position: relative;
float:left;
width: 35px;
top: 3px;
margin-left: 1%;
margin-right: 0%;
}
.SearchBox input:nth-of-type(2) {
position: relative;
float: left;
width: 38px;
top: 0px;
margin-left: 0%;
margin-right: 0%;
}
.SearchBox input:nth-of-type(3){
height: 25px;
display: inline;
float: right;
position: relative;
top: 8px;
margin-left: 1%;
margin-right: 1%;
}
.SearchBox input:nth-of-type(4){
display: inline;
padding-left: 5px;
height: 25px;
font-family: 'Arial Black';
font-size: 100%;
margin-left: auto;
margin-right: auto;
width: auto;
position: relative;
top: 4px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

Answer 1

You could use a combination of display:table on a container and display: table-cell on each nested element.
For example, here's the HTML:
<div class="content">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="search"><input type="text"></li>
</ul>
</div>
And CSS:
.content {
width: 600px;
background: green;
}
ul {
background: gray;
display: table;
margin: 0;
padding: 10px;
width: 100%;
}
li {
list-style: none;
display: table-cell;
margin: 0;
padding: 0;
}
li.icon {
background: red;
width: 10%;
}
li.search {
width: 80%;
}
li.search input {
border: 0;
width: 100%;
}
Here's a JSFiddle to demonstrate: http://jsfiddle.net/mknkz32p/