How to make a div fill a remaining horizontal space?

Question

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to f

Answer 1

I had a similar problem and I found the solution here: https://stackoverflow.com/a/16909141/3934886

The solution is for a fixed center div and liquid side columns.

.center{
    background:#ffffd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

If you want a fixed left column, just change the formula accordingly.

Answer 2

Since this is a rather popular question, I'm inclined to share a nice solution using BFC.
Codepen sample of the following here.

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

In this case, overflow: auto triggers context behavior and makes the right element expand only to the available remaining width and it will naturally expand to full width if .left disappears. A highly useful and clean trick for many UI layouts, but perhaps hard to understand the "why it works" at first.

Answer 3

Try adding position relative, remove width and float properties of the right side, then add left and right property with 0 value.

Also, you can add margin left rule with the value is based on the left element's width (+ some pixels if you need space in between) to maintain its position.

This example is working for me:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

Answer 4

Use display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

Answer 5

If you don't need compatibility with older versions of certain browsers (IE 10 8 or less for example) you can use the calc() CSS function:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

Answer 6

Rules for items and containers;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Use white-space: nowrap; for texts in last items for their undestructuring.

Item X% | Item Y% | Item Z%

Total length always = 100%!

if

Item X=50%
Item Y=10%
Item z=20%

then

Item X=70%

Item X is dominant (first items are dominant in table CSS layout)!

Try max-content; property for div inside for spreading div in container:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}