CSS - Centered div fill remaining horizontal space

Question

Please, I am learning CSS by my self and have 2 questions:

I have 3 DIV inside a "top" DIV, and I need the second (in the center) to fill all the remaining space.

Where is what I got: https://fiddle.jshell.net/3j838det/

Here is the HTML code:

<div class="main">
  <div class="top">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
  </div>
  <div class="bottom">bottom</div>
</div>

Here is the CSS code:

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.main .top {
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
}
.main .top .first {
  width: 140px;
  padding: 4px;
  display: inline-block;
  background-color: #FFCC66;
}
.main .top .second {
  width:auto;
  padding: 4px;
  display: inline-block;
  background-color: #FF9966;
}
.main .top .third {
  width: 100px;
  padding: 4px;
  display: inline-block;
  background-color: #FF6666;
}
.main .bottom{
  height:60px;
  padding: 4px;
}

My questions are:

1. How can I make second DIV to fill all the remaining space?

2. Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?

Thank you!!

Answer 1

1. How can I make second DIV to fill all the remaining space?

A job for Flexbox! :D
Add the following CSS:

.main .top {
    display: -webkit-flex;
    display: flex;
}
.main .top .second {
    -webkit-flex: 1;
    flex: 1;
}

2. Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?

Because there are spaces between the divs in the markup (line break + indentation), and because you display the divs as inline-blocks.
See also How to remove the space between inline-block elements?.
Flexbox eliminates this problem though, so you can remove display: inline-block at once.

[ Updated fiddle ]

Answer 2

Use the table-cell layout.

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.main .top {
  width: 100%;
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
  display: table;
  table-layout: fixed;
}
.main .top .first {
  display: table-cell;
  width: 140px;
  padding: 4px;
  background-color: #FFCC66;
}
.main .top .second {
  display: table-cell;
  padding: 4px;
  background-color: #FF9966;
}
.main .top .third {
  display: table-cell;
  width: 100px;
  padding: 4px;
  background-color: #FF6666;
} 
.main .bottom {
  height:60px;
  padding: 4px;
}

Answer 3

How can I make second DIV to fill all the remaining space?

You can calculate the width of the .second class by calculating the remaining width available with calc. Like so:

width: calc(100% - 264px);

The 264 above was calculated from the total width from first and third divs (140px + 100px = 240px) plus the total padding for all elements (24px), which is = 264px.

---

Why there is a space between first and second DIV, and between second and third DIV, if I did not define any margin?

You're having gaps because of how inline-block works. It's like the spaces between between words. There are a few ways to solve this, but float: left should do here. Like so:

float: left;

Also add width: 100% to your top element and set it to display: inline-block.

Try this Demo

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.main .top {
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
  display: inline-block;
  width: 100%;
}
.main .top > div {
  padding: 4px;
  float: left;
}
.main .top .first {
  width: 140px;
  background-color: #FFCC66;
}
.main .top .second {
  width: calc(100% - 264px); 
  background-color: #FF9966;
}
.main .top .third {
  width: 100px;
  background-color: #FF6666;
}
.main .bottom{
  clear: both;
  height:60px;
  padding: 4px;
}

<div class="main">
  <div class="top">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
  </div>
  <div class="bottom">bottom</div>
</div>

Answer 4

There are two standard ways to achieve this.

1. display: table;

* {
  box-sizing: border-box;
}
.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.top {
  display: table;
  width: 100%;
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
}
.cell {
  display: table-cell;
  width: 60px;
  padding: 4px;
}
.first {
  background-color: #FFCC66;
}
.second {
  width: 100%;
  background-color: #FF9966;
}
.third {
  background-color: #FF6666;
}
.bottom {
  height: 60px;
  padding: 4px;
}

<div class="main">
  <div class="top">
    <div class="cell first">1</div>
    <div class="cell second">2</div>
    <div class="cell third">3</div>
  </div>
  <div class="bottom">bottom</div>
</div>

1. overflow: hidden;

* {
  box-sizing: border-box;
}

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}

.top {
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
}

.top:after {
  content: '';
  clear: both;
  display: block;
}

.top .first {
  float: left;
  width: 140px;
  padding: 4px;
  background-color: #FFCC66;
}

.top .second {
  overflow: hidden;
  padding: 4px;
  background-color: #FF9966;
}

.top .third {
  float: right;
  width: 100px;
  padding: 4px;
  background-color: #FF6666;
}

.main .bottom {
  height: 60px;
  padding: 4px;
}

<div class="main">
  <div class="top">
    <div class="first">1</div>
    <div class="third">3</div>
    <div class="second">2</div>
  </div>
  <div class="bottom">bottom</div>
</div>

Answer 5

Inline-block elements alway take some space (depend on it's font size) to it's right side. So better way to use flex. But you can use this css below to solve them right now.

.main .top>div{
    margin-right: -4px;
}