Make centered div fill width

Question

I have a situation with 3 divs where the first and the third div have width. I want the second div to fill up the remainning space.

Fiddle:http://jsfiddle.net/YzUQy/

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   float:left;
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

What sort of browser support is needed? This is a perfect case for flexbox, but if not you can use absolute positioning. — robooneus, Aug 19 '13 at 12:47
possible duplicate of [make a div fill up the remaining width](http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width) — ebram khalil, Aug 19 '13 at 12:48
@robooneus: God how badly I wish flexbox to become widely supported!!! — kumarharsh, Aug 19 '13 at 12:56
If you don't mind changing the order of your divs in your html you can use pretty basic css and trigger what is called a 'block formatting context': http://jsfiddle.net/Jag96/xH76a/ — Joe_G, Aug 19 '13 at 13:22

score 3 · Answer 1 · answered Aug 19 '13 at 12:52

Use display:table and display:table-cell : http://jsfiddle.net/YzUQy/4/

CSS:

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3{
    width: 220px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

#container{
    display: table;
    width:700px;
}

#container > div{
    display:table-cell;
}

Vucko · Accepted Answer · 2013-08-20T05:27:11.320

3

You can use calc():

#div2{
    float:left;
    overflow: scroll;
    border: 1px solid #ccc;
    width: calc(100% - 420px - 20px - 6px - 290px); 
    /* 100% - div3 width - div3 padding - borders - div1 width */
}

JSFiddle

Browser support : caniuse

edited Aug 20 '13 at 05:27

answered Aug 19 '13 at 12:52

Vucko

20,555
10
56
107

Woow nice. Did not knew that calc has become so supported! – Jacob Aug 19 '13 at 12:56
Yes, `calc` is awesome :) – Vucko Aug 19 '13 at 12:57
Yup, you can use calc rather safely these days except opera 12 (?) – kumarharsh Aug 19 '13 at 12:58
@Harsh current version of opera is 15 - [ref](http://www.opera.com/docs/history/). – Vucko Aug 19 '13 at 13:52
Yeah, I know current is 15, but you can't disregard just one version old browsers, can you? [opera having a relatively small footprint does not discount this] – kumarharsh Aug 21 '13 at 17:38
@Vucko: FYI, Opera 15 has not released on Linux – kumarharsh Aug 27 '13 at 11:25

score 2 · Answer 3 · answered Aug 19 '13 at 12:52

You need this: (and for future references too)

http://www.dynamicdrive.com/style/layouts/category/C13/

Particularly, you'll need this link: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

HTML

<div class="content-wrapper">
   <div class="content">
</div>
<div class="left"></div>
<div class="right"></div>

CSS

.content-wrapper {
  float: left;
  width: 100%;
}
.content {
  margin: 0 200px 0 230px; /* set to the widths of right and left columns */
}
.left {
  float: left;
  width: 230px;
  margin-left: -100%;
  background: #C8FC98;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background: #FDE95E;
}

score 1 · Answer 4 · answered Aug 19 '13 at 12:50

You can use absolute positioning of the center element like so:

http://jsfiddle.net/9eGVA/

#container {
    position:relative;
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   position:absolute;
    overflow: scroll;
    border: 1px solid #333;
    left:292px; /* total width of div1 */
    right:442px; /* total width of div2 */
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

And by total width I mean including padding and borders (unless you use the border-box spec which you aren't here)

score 1 · Answer 5 · answered Aug 19 '13 at 12:58

You can use a flex layout. Here is a fiddle: http://jsfiddle.net/fred02138/JDqQu/

<div id="outer">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

CSS:

#outer {
    display: -webkit-flex;
   -webkit-flex-direction: row;
    display: flex;
    flex-direction: row;
    width: 100%;    
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

Should probably mention the browser support, as flexbox is still not very well supported: http://caniuse.com/flexbox — xec, Aug 19 '13 at 13:23

Make centered div fill width

5 Answers5

HTML

CSS