How to make a div fill a remaining horizontal spac

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 fill the remaining space.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Answer 1

If you are trying to fill remaining space in a flexbox between 2 items, add the following class to a an empty div between the 2 you want to seperate:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

Answer 2

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Try this. It worked for me.

Answer 3

Boushley's answer seems to be the best way to go in order to arrange this using floats. However, it isn't without its problems. Nested floating within the expanded element will not be available to you; it will break the page.

The method shown basically "fakes it" when it comes to the expanding element - it isn't actually floating, it's just playing along with the fixed-width floated elements using its margins.

The problem then is exactly that: the expanding element isn't floated. If you try and have any nested floating within the expanding element, those "nested" floated items aren't really nested at all; when you try to stick a clear: both; under your "nested" floated items, you'll end up clearing the top-level floats as well.

Then, to use Boushley's solution, I'd like to add that you should place a div such as the following: .fakeFloat { height: 100%; width: 100%; float: left; } and place this directly within the expanded div; all the expanded div's contents should go then within this fakeFloat element.

For this reason, I'd recommend using tables in this specific case. Floated elements really aren't designed to do the expansion that you'd like, whereas the solution using a table is trivial. An argument is generally made that floating is more proper for layouts, not tables.. but you aren't using floating here anyways, you're faking it - and that sort of defeats the purpose of the stylistic argument for this specific case, in my humble opinion.

Answer 4

These days, you should use the flexbox method (may be adapted to all browsers with a browser prefix).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

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>