I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/
The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not exceed the size of the blue box. Here is a screenshot for reference:
Given that the content within each box is dynamic, their heights can vary. I attempted to address this issue with the code snippet provided below in the fiddle, but it doesn't quite achieve the desired outcome.
.right1:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}