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-block s.
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;
}