DIV Filling Remaining Width of Container Which has Width 100%

I've been searching all morning and I can't find a solution to my specific problem. I have a layout where I have a left column that is set to about 50px and a right column that is set to take up the remaining 100% of the page. This part works.

Now, in the right column, I have another 2 column layout. But since the container's width is 100%, my inner right column keeps expandi开发者_如何学编程ng past it's parent. I need it to simply fill the remaining space, similar to the parent layout. I've created a jsFiddle with my example code.

http://jsfiddle.net/87nb2/1/

As you can see, the green 'gallery' section is going past the right side of it's parent. This is the problem I'm trying to solve.

The way you have it at the moment, I think all you need to do is:

• On #gallery, change width: 100% to right: 0.
• This works because an element can have both left and right properties at the same time.

Live Demo

You might also want to adjust the left value to 50px, to avoid cutting off some of the left element:

Live Demo

http://jsfiddle.net/87nb2/14/

#filmstrip_nav {
    float:left;
    height: 94%;
    width: 50px;
    background-color:red;
}

#gallery {
    overflow: auto;
    height: 94%;
    background-color: green;
    width: 100%
    float:left;
}