Is there a way to position two divs side by side, where one div is 75% width and the other is 25% width? Additionally, can we place another div on top with margin:0 auto; to center the content of the page with a width of 986px?
Here is an example code snippet:
#bodywrapper
{
margin:0 auto;
}
#green-portion
{
background:url('images/green_portion.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:75%;
position:absolute;
top:30%;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1;
display:none;
}
#blue-portion
{
width:25%;
background-color:#051f3b;
height:400px;
position:absolute;
top:30%;
bottom:0;
left:75%;
right:0;
overflow:hidden;
z-index:99999;
}
<div id="bodywrapper">
<div id="green-portion">
</div>
<div id="blue-portion">
</div>
</div>