set div width to remaining space

Question

I'm working on a page layout and have divs as columns, A,B,C,D,E. The problem is that column C needs to have its width set to/eat up the remaining horizontal space of the parent, in this case, the body.

width of A and E is percent based.

width of B and D is pixel based.

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.col {
  display: inline-block;
  position: relative;
  height: 100%;
  padding: 0 10px;
}

.a {
  background-color: #2a85ff;
  width: 20%;
}

.b {
  background-color: #83bf6e;
  width: 100px;
}

.c {
  background-color: #ff6a55;
}

.c span {
  font-weight: bolder;
}

.d {
  background-color: #8e59ff;
  width: 200px;
}

.e {
  background-color: #b5e4ca;
  width: 20%;
}

<div class="col a">
  <h1>A</h1>
  w:%percent
  <br/> h:100%
</div>

<div class="col b">
  <h1>B</h1>
  w:pixel
  <br/> h:100%
</div>

<div class="col c">
  <h1>C</h1>
  <span>w:remaining</span>
  <br/> h:100%
</div>

<div class="col d">
  <h1>D</h1>
  w:pixel
  <br/> h:100%
</div>

<div class="col e">
  <h1>E</h1>
  w:%percent
  <br/> h:100%
</div>

jsfiddle: https://jsfiddle.net/2bu7zv59/

thank you!

Remaining horizontal space of what? the window? – John Sep 13 '22 at 16:02 — John, Sep 13 '22 at 16:02
@John yes, sorry, i will update the question. – nicole Sep 13 '22 at 16:05 — nicole, Sep 13 '22 at 16:05

score 2 · Answer 1 · answered Sep 13 '22 at 16:06

Using flex this is very easy to accomplish with the flex-grow property. In the snippet below I wrapper the columns in a container div and then applied display: flex to the container. You can also simply apply display: flex to the body if you prefer that.

Then I applied flex-grow: 1 to column c.

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  height: 100%;
}

.col {
  display: inline-block;
  position: relative;
  height: 100%;
  padding: 0 10px;
}

.a {
  background-color: #2a85ff;
  width: 20%;
}

.b {
  background-color: #83bf6e;
  width: 100px;
}

.c {
  background-color: #ff6a55;
  flex-grow: 1
}

.c span {
  font-weight: bolder;
}

.d {
  background-color: #8e59ff;
  width: 200px;
}

.e {
  background-color: #b5e4ca;
  width: 20%;
}

<div class="container">
  <div class="col a">
    <h1>A</h1>
    w:%percent
    <br/> h:100%
  </div>

  <div class="col b">
    <h1>B</h1>
    w:pixel
    <br/> h:100%
  </div>

  <div class="col c">
    <h1>C</h1>
    <span>w:remaining</span>
    <br/> h:100%
  </div>

  <div class="col d">
    <h1>D</h1>
    w:pixel
    <br/> h:100%
  </div>

  <div class="col e">
    <h1>E</h1>
    w:%percent
    <br/> h:100%
  </div>
</div>

thank you. i had to set adams answer as accepted. he beat you by just a few seconds. — nicole, Sep 13 '22 at 18:57

score 1 · Accepted Answer · answered Sep 13 '22 at 16:06

the easiest thing to do is to make the body of type display:flex. You can then use the flex-grow rule to expand the desired column to use up the rest of the width as follows:

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
}

.col {
  /* display: inline-block; */
  position: relative;
  height: 100%;
  padding: 0 10px;
}

.a {
  background-color: #2a85ff;
  width: 20%;
}

.b {
  background-color: #83bf6e;
  width: 100px;
}

.c {
  background-color: #ff6a55;
  flex-grow: 2;
}

.c span {
  font-weight: bolder;
}

.d {
  background-color: #8e59ff;
  width: 200px;
}

.e {
  background-color: #b5e4ca;
  width: 20%;
}

<div class="col a">
  <h1>A</h1>
  w:%percent
  <br /> h:100%
</div>

<div class="col b">
  <h1>B</h1>
  w:pixel
  <br /> h:100%
</div>

<div class="col c">
  <h1>C</h1>
  <span>w:remaining</span>
  <br /> h:100%
</div>

<div class="col d">
  <h1>D</h1>
  w:pixel
  <br /> h:100%
</div>

<div class="col e">
  <h1>E</h1>
  w:%percent
  <br /> h:100%
</div>

set div width to remaining space

2 Answers2