Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height.
<style type="text/css">
#green-box {
width: 75%;
background: green;
float: left;
position: relative;
height: 100%;
overflow: visible;
position: relative;
}
#blue-box {
width: 25%;
background: blue;
float: left;
height: 100%;
}
#red-box {
position: relative;
top: 50px;
left: 450px;
width: 357px;
background: red;
height: 207px;
margin: 0 auto;
}
#green-box-content {
margin: 0 auto;
width: 1600px;
height: 800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>