How to make a div fill a remaining horizontal space?

The solution comes from the display property.

Basically you need to make the two divs act like table cells. So instead of using float:left, you'll have to use display:table-cell on both divs, and for the dynamic width div you need to set width:auto; also. The both divs should be placed into a 100% width container with the display:table property.

Here is the css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

And the HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

IMPORTANT:For Internet Explorer you need to specify the float property on the dynamic width div, otherwise the space will not be filled.

I hope that this will solve your problem. If you want, you can read the full article I wrote about this on my blog.

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.

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/