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

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