CSS - inline divs size - css

Question

I have 4 divs.
1 - Divs '.left' and '.right' should be 150px min. - > OK
2 - Divs '.middle1' and '.middle2' should get the remaining with
divided by them. -> NOT OK
Why do I have a blank space between the '.middle2' and '.right'?
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
float: left;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1"></div>
<div class="middle2"></div>
<div class="right"></div>
</div>

Answer 1

Not sure how do you want to display. Instead of playing around with floats, you can use display:flex to achieve the same.
Check the below snippet
.container {
display:flex;
}
.left {
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
padding: 0;
background-color: blue;
height: 30px;
width: 35%;
}
.middle2 {
padding: 0;
background-color: grey;
height: 30px;
width: 35%;
}
.right {
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}
<div class="container">
<div class="left">
<input type="text">
<span class="list">list</span>
</div>
<div class="middle1">m1</div>
<div class="middle2">m2</div>
<div class="right">right</div>
</div>

Answer 2

Hi this is not the best way to do this.
You should make a div with three sections of it and divide the middle one into two sections.
So basically the structure you need is
Div > 3 columns and then the middle column has two columns conatined.
However, here is a quick fix for your code :
- Apply float:right to .middle2
- Fix the width percetage for .middle1 and .middle2
.container {
width: 100%;
display: table;
}
.left {
float: left;
display: table-cell;
padding: 0;
background-color: red;
height: 30px;
width: 15%;
min-width:150px;
}
.middle1 {
float: left;
display: table-cell;
padding: 0;
background-color: blue;
height: 30px;
width: 31%;
}
.middle2 {
float: right;
display: table-cell;
padding: 0;
background-color: grey;
height: 30px;
width: 31%;
}
.right {
display: table-cell;
background-color: green;
height: 30px;
width: 15%;
min-width:150px;
}
input {
margin:5px;
width:100px;
background: #FFF;
}
.list{
margin: 0 2px;
color: #FFF;
}