CSS - inline divs size

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>

None of your divs are `inline`...they all have non-inline display properties. You need to clarufy what it is you are trying to achieve, — Paulie_D, Nov 27 '17 at 15:12
Because `min-width:150px` is of course _more_ than `width: 15%` if the screen width is small enough ... — CBroe, Nov 27 '17 at 15:13

score 1 · Accepted Answer · edited Mar 08 '19 at 00:02

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>

score 0 · Answer 2 · answered Nov 27 '17 at 15:16

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;
}

CSS - inline divs size

2 Answers2