css - 100% divs and fixed sized divs living happily ever after?

Question

Basically I am trying to have a fixed size right-hand sidebar at 300px (width) and in the center have a 100% width, taking into account 300px which are alongside it.

Also I am trying to figure out how to place a 100% width div inside a 100% width container div, I've included images of what I would like to achieve below:

Basic Idea

For example this could be what's seen on a screen resolution of 1440 x 900

Making it Re-sizable

Whereas this could be what's seen on a screen resolution of 1024 x 768

As you can see everything stays within proportion with each other. Any help would be greatly appreciated. Thank you.

Answer 1

I was able to get it working with this. There very well might be a better way to do this, but it looks like what you described.

Code: https://gist.github.com/4274099

Result: http://codepen.io/joe/full/wgJdm

The key was to "fake" the 100% width of #left (yellow) inner div by positioning it absolute within the #sidebar parent and setting its right equal to the width of the #right div.