CODEWITHSUNDEEP
htmlcss
Hardist
Hardist

Reputation: 1983

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, but it didn't work. And if I set the third div itself on 100%, it displays below the other two divs but it should remain on the same line.

.ui-tablewrapper {
    position: relative;
    width: 100%;
    color: #000;
    font-size: 0;
}
.ui-tablebanner {
    display: inline-block;
    margin-right: 1px;
    color: #000;
    border: 1px solid #000;
    height: 25px;
    font-size: .75rem;
}
#ui-tablebanner-30 {
    width: 30px;
}
#ui-tablebanner-26 {
    width: 26px;
}
<div class="ui-tablewrapper">
    <div class="ui-tablebanner" id="ui-tablebanner-30">1</div>
    <div class="ui-tablebanner" id="ui-tablebanner-26">2</div>
    <div class="ui-tablebanner" id="ui-tablebanner">3</div>
</div>

Upvotes: 2

Views: 99

Answers (3)

Stickers
Stickers

Reputation: 78736

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;
}
<div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="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: 1px 0;
    width: 100%;
}
.item {
    display: table-cell;
    vertical-align: top;
    border: 1px solid;
    width: 30px;
}
.item:last-child {
    width: auto;
}
<div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="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;
}
<div class="row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115296

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: 0 0 auto
}
#ui-tablebanner-26 {
  flex-basis: 26px;
  background: red;
}
#ui-tablebanner-30 {
  flex-basis: 30px;
  background: blue;
}
#ui-tablebanner {
  flex-grow: 1;
  background: green;
}
<div class="ui-tablewrapper">
  <div class="ui-tablebanner" id="ui-tablebanner-30">1</div>
  <div class="ui-tablebanner" id="ui-tablebanner-26">2</div>
  <div class="ui-tablebanner" id="ui-tablebanner">3</div>
</div>

Upvotes: 1

Ryan Neuffer
Ryan Neuffer

Reputation: 792

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);...

Upvotes: 1

Related Questions