CODEWITHSUNDEEP
csshtml
Jacob
Jacob

Reputation: 4031

Make centered div fill width

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;
}

Upvotes: 0

Views: 805

Answers (5)

Vucko
Vucko

Reputation: 20834

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

Upvotes: 3

fred02138
fred02138

Reputation: 3361

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;
}

Upvotes: 1

AdityaSaxena
AdityaSaxena

Reputation: 2157

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;
}

Upvotes: 3

kumarharsh
kumarharsh

Reputation: 19609

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;
}

Upvotes: 2

robooneus
robooneus

Reputation: 1344

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)

Upvotes: 1

Related Questions