Make a div fill up the remaining width

Question

How can I make a div fill up the remaining width?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

How can I get div2 to fill up the remainder?

Answer 1

Try out something like this:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs will naturally take up 100% width of their container, there is no need to explicitly set this width. By adding a left/right margin the same as the two side divs, it's own contents is forced to sit between them.

Note that the "middle div" goes after the "right div" in the HTML

Answer 2

Up-to-date solution (October 2014) : ready for fluid layouts

---

Introduction:

This solution is even simpler than the one provided by Leigh. It is actually based on it.

Here you can notice that the middle element (in our case, with "content__middle" class) does not have any dimensional property specified - no width, nor padding, nor margin related property at all - but only an overflow: auto; (see note 1).

The great advantage is that now you can specify a max-width and a min-width to your left & right elements. Which is fantastic for fluid layouts.. hence responsive layout :-)

note 1: versus Leigh's answer where you need to add the margin-left & margin-right properties to the "content__middle" class.

---

Code with non-fluid layout:

Here the left & right elements (with classes "content__left" and "content__right") have a fixed width (in pixels): hence called non-fluid layout.

Live Demo on http://jsbin.com/qukocefudusu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

---

Code with fluid layout:

Here the left & right elements (with classes "content__left" and "content__right") have a variable width (in percentages) but also a minimum and maximum width: hence called fluid layout.

Live Demo in a fluid layout with the max-width properties http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

---

Browser Support

Tested on BrowserStack.com on the following web browsers:

• IE7 to IE11
• Ff 20, Ff 28
• Safari 4.0 (windows XP), Safari 5.1 (windows XP)
• Chrome 20, Chrome 25, Chrome 30, Chrome 33,
• Opera 20

Answer 3

Flex-boxes are the solution - and they're fantastic. I've been wanting something like this out of css for a decade. All you need is to add display: flex to your style for "Main" and flex-grow: 100 (where 100 is arbitrary - its not important that it be exactly 100). Try adding this style (colors added to make the effect visible):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

More info about flex boxes here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

Use the CSS Flexbox flex-grow property to achieve this.

.main {
  display: flex;
}
.col-1, .col-3 {
  flex: 0 0 100px;
}
.col-2 {
  flex-grow: 1;
}

<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>

Answer 5

Although a bit late in posting an answer, here is an alternative approach without using margins.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

This method works like magic, but here is an explanation :)\

Fiddle with a similar sample here.

Answer 6

The Div that has to take the remaining space has to be a class.. The other divs can be id(s) but they must have width..

CSS:

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML:

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

The following link has the code in action, which should solve the remaining area coverage issue.

jsFiddle

Answer 7

I was looking for a solution to the opposite problem where I needed a fixed width div in the centre and a fluid width div on either side, so I came up with the following and thought I'd post it here in case anyone needs it.

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}

<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>

If you change the width of the #center element then you need to update the width property of .fluid to:

width: calc(50% - [half of center width]px);