How to make a div fill a remaining horizontal space?

Question

I have 2 divs: one on the left side and one on 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

You can try using the code given below:

#left {

  float:left;

  width:180px;

  background-color:#ff0000;

}

#right {

  width: 100%;

  background-color:#00FF00;

}

<div>

  <div id="left">

    left

  </div>

  <div id="right">

    right

  </div>

</div>