Imagine a scenario where you have a container with a fixed width and centered. Inside this container are two DIVs that are position relative to the window, placed side by side. The content inside these DIVs should ideally be centered, aligned with the container.
If you want to explore a simplified version of this setup, check out the code snippet provided in this link.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
#container {
width: 960px;
height: 1000px;
background: red;
margin: 0 auto;
}
#windowdiv {
height: 200px;
background: purple;
padding-top: 20px;
position: absolute;
left: 0;
right: 30%;
top: 25px;
}
#windowdiv2 {
height: 200px;
background: blue;
padding-top: 20px;
position: absolute;
left: 60%;
right: 0;
top: 10px;
}
</style>
</head>
<body>
<div id='container'>
<div id='windowdiv'>
<p>some content</p>
</div>
<div id='windowdiv2'>
<p>some content</p>
</div>
</div>
</body>
</html>