I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).

How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?

If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.

Your help is much appreciated. My code is as follows. 

```
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style media="screen" type="text/css">

    .bannerBackground
        {
        width: 100%;
        position: absolute;
        top: 0;
        height: 27px;
        background-color: orange;
        }

    .rightBanner
        {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 9;
        height: 27px;
        padding-right: 20px;
        width: 200px;
        text-align: right;
        color: #CCCCCC;
        font-size: 20px;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-weight: bold;
        background-color: green;
        margin:0;
        display: block;
        }

    .leftBanner
        {
        white-space: nowrap;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
        white-space: nowrap;
        margin-bottom: 0px;
        width: 645px;
        background-color: blue;
        height: 27px;
        display: block;
        }

    body
        {
        font-family: arial;
        margin: 0;
        padding: 0;
        color: #EEEEEE;
        }
</style>
</head>

<body>

        <div class="leftBanner">
        </div>

        <div class="rightBanner">
            <div>
            Some Title Text
            </div>
        </div>

        <div class="bannerBackground">
        </div>

</body>
</html>

```