How To Make One Column To Take All The Remaining Width?

I have the following fiddle: http://jsfiddle.net/j40recob/ I need the third div to stretch the remaining width (100%). Tried several solutions like float:left on the other two divs

Solution 1:

If you want the most up-to-date method, it's flexbox.

.ui-tablewrapper {
  color: #fff;
  display: flex;
}
.ui-tablebanner {
  color: #000;
  border: 1px solid #000;
  height: 25px;
  font-size: .75rem;
  flex: 00 auto
}
#ui-tablebanner-26 {
  flex-basis: 26px;
  background: red;
}
#ui-tablebanner-30 {
  flex-basis: 30px;
  background: blue;
}
#ui-tablebanner {
  flex-grow: 1;
  background: green;
}

<divclass="ui-tablewrapper"><divclass="ui-tablebanner"id="ui-tablebanner-30">1</div><divclass="ui-tablebanner"id="ui-tablebanner-26">2</div><divclass="ui-tablebanner"id="ui-tablebanner">3</div></div>

Solution 2:

You can absolutely position the blocks, setting the left edge of each and the right edge of the last block to 0:

.ui-tablebanner {
    box-sizing: border-box;
    position: absolute;
}

#ui-tablebanner-26 {
    width: 26px;
    left: 31px;

}

#ui-tablebanner-30 {
    width: 30px;
    left: 0;
}

#ui-tablebanner {
    left: 58px;
    right: 0;
}

Here's a working fiddle: https://jsfiddle.net/7tgfmou2/1/

As an aside, I would also recommend using box-sizing: border-box to make width calculations easier, https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing. And a CSS preprocessor like Sass, http://sass-lang.com/, to allow you to use variables in your position calculations. Example: #ui-tablebanner { left: $banner-26-width + $banner-30-width + ($banner-margin*2);...

Solution 3:

Approach 1 - using float. Set the first 2 items to float:left and the 3rd one with overflow:auto. Browser support is super IE6+.

.row {
    overflow: auto;
}
.item {
    float: left;
    border: 1px solid;
    margin-right: 1px;
    width: 30px;
}
.item:last-child {
    float: none;
    overflow: auto;
    width: auto;
    margin-right: 0;
}

<divclass="row"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div></div>

Approach 2 - using CSS table layout. The last cell will occupy all the available width automatically. Browser support is great IE8+.

.row {
    display: table;
    border-collapse: separate;
    border-spacing: 1px0;
    width: 100%;
}
.item {
    display: table-cell;
    vertical-align: top;
    border: 1px solid;
    width: 30px;
}
.item:last-child {
    width: auto;
}

<divclass="row"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div></div>

Approach 3 - using inline-block and calc(), and do the math, be aware that any border, padding, and margin are all counted. Browser support is good IE9+.

.row {
    font-size: 0; /*remove inline gaps*/
}
.item {
    font-size: 16px; /*reset font size*/display: inline-block;
    vertical-align: top;
    border: 1px solid;
    margin-right: 1px;
    width: 30px;
}
.item:last-child {
    width: calc(100% - 68px); /*do the math*/margin-right: 0;
}

<divclass="row"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div></div>