Build a scalable/ fluid 2 column rectangular module

See more:

CSS

HTML

scalability

layout

I am building this module in html and css I would like to avoid the use of JavaScript. To help explain what I'm trying to create I've attached a picture.

http://imageshack.com/a/img716/2821/nd4x.jpg[^]

Box A - #left will have a picture inside
Box B - #right will have text inside.
Neither Box A or B can overlap each other.

So far - I have managed to build the module relying on (%) and have got it to rescale smaller or larger depending on the width of browser. But it's not quite working how I intend it to yet.

The problem I'm facing -

When the module is scaled down to its smallest with the help of (min-width) Box B's width scales down with it. This is not what I intend to happen, Box B needs to stay a fixed (px) width while Box A rescales by a (%) width.

To overcome this problem I tried giving Box B (px) width instead of (%). This made matters worse - now when the browser is scaled down to its smallest Box B leaves the viewport & the scrollbars (x axis) takeover. Box B needs to be within the viewport even at the smallest scale. Any ideas of how to get this working? Thanks.

html -

<div id="outer">
<div id="left">Box A</div>
<div id="right">Box B</div>
</div>

css -

#outer {
background-color:#830000;
margin:0px 0px 0px 0px;
max-width:815px;
min-width:518px;
position:relative;
width:100%;
z-index:1;
}
/*Box A*/
#left {
background-color:#b1b1b1;
float:left;
padding-bottom:57%;
position:absolute;
width:72%;
height:10px; /* extra 10px helps show overlap of #left onto #right*/
z-index:2;
}
/*Box B*/
/*Switch between #right(px) and #right2(%) for the two outcomes I'm getting*/
#right { /* using px - Good - the width is fixed, But - should not overlap #left */
width:229px; 
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
#right2 { /*using % - Good - no overlapping, But - the width of 229px decreases*/
width:28%; 
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}

http://codepen.io/JimTiger/pen/mlvLE[^]