Q:

How to set a div to fill the space remaining in his parent (horizontally)?

I've been roaming around lately to find a way to have two boxes in my page, one being at a constant width (260px) and the other being the rest of the space. Both are meant to be on the same line or, at least, their both top are aligned :
|--------------------------------------------------|
||------------||----------------------------------||
||   260 px   ||         Automatic width          ||
||------------||               text               ||
|              |               here               ||
|              |----------------------------------||
|--------------------------------------------------|

As you can see on the little explaination, I've got a wrapper, which is always 90% of the page. And then, I've got my right panel which has to be adapted depending on the screen size, and its width is (100% of the wrapper) - 260px. Though, I can't get to do that, even if I tried lots of different ideas. Here is my code :
#wrapper {
    width: 90%;
    margin: auto; /* Center it ! */
    display: block; 
    background-color: gray;
}
#right
    display: block;
    background-color: gray;
    float: left;
    width: auto; /* What can I put here ? */
}
#left { /* This one works more or less flawlessly */
    background-color: gray;
    display: block;
    float: left;
    width: 260px;
}

Thank you very much in advance,Thomas

A:

You could use the following css
#right {
    display: block;
    background-color: gray;
    float: left;
    width: calc(100% - 260px);
}

According to http://caniuse.com/#feat=calc, this will probably work for all modern browsers and IE9 and up.

