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;
}
#left {
background-color:#b1b1b1;
float:left;
padding-bottom:57%;
position:absolute;
width:72%;
height:10px;
z-index:2;
}
#right {
width:229px;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
#right2 {
width:28%;
background-color:#81dd27;
float:right;
padding-bottom:57%;
position:relative;
z-index:1;
}
http://codepen.io/JimTiger/pen/mlvLE[
^]