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

The problem that I found with Boushley's answer is that if the right column is longer than the left it will just wrap around the left and resume filling the whole space. This is not the behavior I was looking for. After searching through lots of 'solutions' I found a tutorial (now link is dead) on creating three column pages.

The author offer's three different ways, one fixed width, one with three variable columns and one with fixed outer columns and a variable width middle. Much more elegant and effective than other examples I found. Significantly improved my understanding of CSS layout.

Basically, in the simple case above, float the first column left and give it a fixed width. Then give the column on the right a left-margin that is a little wider than the first column. That's it. Done. Ala Boushley's code:

Here's a demo in Stack Snippets & jsFiddle

#left {    float: left;    width: 180px;  }    #right {    margin-left: 180px;  }    /* just to highlight divs for example*/  #left { background-color: pink; }  #right { background-color: lightgreen;}

<div id="left">  left  </div>  <div id="right"> right </div>

With Boushley's example the left column holds the other column to the right. As soon as the left column ends the right begins filling the whole space again. Here the right column simply aligns further into the page and the left column occupies it's big fat margin. No flow interactions needed.

Answer 2

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/