3 div's middle div take up remaining width

Question

Alright guys, I've been busting my balls over this one.

I've got three divs; left, middle, right. All 100% height. The left and right div have a fixed width of 150px. Now I want the middle div to take up the remaining space.

Example: Here

CSS:

#left {
    height:100%;
    width:150px;
    float:left;
    background:red;
    z-index:999;
}
#middle {
    height:100%;
    width:100%;
    background:yellow;
    margin-left:-150px;
    margin-right:-150px;
}
#right {
    float:right;
    height:100%;
    width:150px;
    background:red;
    z-index:998;
}

Just google for css layouts and you will find something very similar if not the same on one of those pages, this is very common problem. — Gatekeeper, Mar 20 '13 at 11:52

score 19 · Accepted Answer · answered Mar 20 '13 at 11:45

19

Use display: table:

#container {
    display: table;
    width: 100%;
}

#left, #middle, #right {
    display: table-cell;
}

#left, #right {
    width: 150px;
}

Where the #container is your parent element like in

<div id="container">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Here is a Fiddle.

answered Mar 20 '13 at 11:45

Linus Caldwell

10,908
12
46
58

How do I do that but vertically? – Rodrigo Ruiz Dec 02 '15 at 04:35
@RodrigoRuiz: Actually I don't really know what you mean because in most cases this happens automatically. Anyway: You should post a new question. – Linus Caldwell Dec 02 '15 at 14:15

mangatinanda · Answer 2 · 2017-10-13T14:08:13.390

Okay using flex and based this answer

#parent {
  display: flex;
}
#left {
  width:150px;
  background-color:#ff0000;
}
#middle {
  flex: 1 1 auto;
  background-color:#00ff00;
}
#right {
  width: 150px;
  background-color:#0000ff;
}

<div id="parent">
  <div id="left">left</div>
  <div id="middle">middle</div>
  <div id="right">right</div>
</div>

This actually works if the left and right divs has variable width also.

score 2 · Answer 3 · edited May 23 '17 at 10:30

Check this similar answer

HTML

<div class = "container">
    <div class = "fixed">
        I'm 150px wide! Glee is awesome!
    </div>
    <div class = "fluid">
        I'm fluid! Glee is awesome!
    </div>
    <div class = "fixed">        
        I'm 150px wide! Glee is awesome!
    </div>
</div>

CSS

html, body {
    height: 100%;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    display: table;
    width: 100%;
    height: 100%;
}
.container > div {
    display: table-cell;
    text-align: center;
}
.fixed {
    width: 150px;
    background: rgb(34, 177, 77);
    color: white;
}
.fluid {
    background: rgb(0, 162, 232);
}

DEMO

score 0 · Answer 4 · answered Jul 04 '17 at 10:13

If you don't want to use table cells and don't want to give your outer boxes a fixed width (instead let their width be determined by their content, you can use the overflow-hidden and float method)

The bad thing about this method is you have to adhere to having overflow hidden on your divs and also you have to arrange your divs in a backwards way (see below)

DEMO

HTML

<div class='container'>

    <div class='third-box'>Third</div>

    <div class='first-second'>
        <div class='first-box'>First</div>
        <div class='second-box'>Second</div>
    </div>

</div>

CSS

.container {
     width: 400px;
}

.first-second {
    overflow: hidden;
}

.first-box {
    float: left;
    background-color: coral;
}

.second-box {
    overflow: hidden;
    background-color: aquamarine;
}

.third-box {
    float: right;
    background-color: salmon;
}

score 0 · Answer 5 · answered Apr 15 '20 at 12:28

I used this to set a flexible width for the items to the side. Used it in a listed item to get a progress bar with 2 buttons on the side.

ul {
    display: table;
    width: 100%;
}

ul > li {
    display: table-cell;
}

ul > li:nth-child(2) {
    min-width: 100%;
}

3 div's middle div take up remaining width

5 Answers5