How do I get the bottom right div not overflow the parent div and padding when the top right divs height will be dynamic?

I am working on a web page that has three containers. One container on the left that takes up 100% of its parents height and two containers stacked on the right. The top-right container has dynamic content so its size will change. I would like the bottom-right container to take up the rest of the parent div w/0 overflowing its parent. Currently it overflows.

Below is what I have tried (jfiddle at http://jsfiddle.net/ULyCH/1/):

<html>
    <head>
        <style type="text/css">
            .container{             
                background: blue;
                width: 1000px;
                height: 1000px;
                padding: 15px;
                overflow: hidden;
            }

            .left{
                background: green;
                float: left;
                width:30%;
                height: 100%;
            }

            .right-top{
                background: grey;
                float:right;
                width: 70%;
                height: 300px;
            }

            .right-bottom{
                background: yellow;
                float: right;
                width: 70%; 
                height: inherit;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">left left left left left</div>            
            <div class="right-top">right-top right-top right-top</div>
            <div class="right-bottom">right-bottom right-bottom</div>           
        </div>
    </body>
</html>

Solution

1) http://jsfiddle.net/48QVB/1/

<div class="container">
    <div class="wrapper">
        <div class="left">left left left left left</div>
        <div class="right-top">right-top right-top right-top</div>
        <div class="right-bottom">right-bottom right-bottom</div>
    </div>
</div>

Just add a wrapper inside .container, wrapper with overflow: hidden.

.container has padding that children can still be above of, even without overflowing, therefore overflow: hidden on .container itself won't give us much. I think that's exactly what you're complaining about.

2) http://jsfiddle.net/48QVB/2

<div class="container">
    <div class="left">left left left left left</div>
    <div class="right">
        <div class="right-top">right-top right-top right-top</div>
        <div class="right-bottom">right-bottom right-bottom</div>
    </div>
</div>

Well, the reason you want bottom-right div to fill whole remaining space in .container is...background? Just add proper container for each column, i.e. .left /and/ .right. Set background on them. Then set another background for top-right div, if you really want to.