Inline block elements positioned with one fixed and the other relative - html

Question

I am trying to get two inline-block elements to position where the left side #faqBlock remains positioned fixed and then #blueBox is positioned relative. This basic functionality is working in the snippet, but the containerRight is overtaking containerLeft.
How can I main the containers width and inline-block display while having #faqBlock being positioned fixed?
#page-wrap {
margin-top: 70px;
max-width: 100%;
}
#containerLeft,
#containerRight {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
height: 200vh;
}
/*-- Container Left --*/
#containerLeft {
width: 40%;
position: fixed;
}
#faqBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: #b82222;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
#blueBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: blue;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
/*-- Container Right --*/
#containerRight {
width: 60%;
position: relative;
}
<div id="page-wrap">
<div id="containerLeft">
<div id="faqBlock">
gfsag
</div>
</div>
<div id="containerRight">
<div id="blueBlock">
gfsag
</div>
</div>
</div>

Answer 1

Elements with position fixed aren't in the regular flow, so it won't ever take up space in the way you are imagining. You can add margin-left: 40%; (equal to the width of the left container) onto the right container to make it look like it's holding space.
If this isn't what you are looking for, let me know!
#page-wrap {
margin-top: 70px;
max-width: 100%;
}
#containerLeft, #containerRight {
display: inline-block;
vertical-align: top;
box-sizing: border-box;
height: 200vh;
}
/*-- Container Left --*/
#containerLeft {
width: 40%;
position: fixed;
}
#faqBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: #b82222;
box-shadow: 10px 5px 5px rgba(0,0,0,0.12);
}
#blueBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: blue;
box-shadow: 10px 5px 5px rgba(0,0,0,0.12);
}
/*-- Container Right --*/
#containerRight {
width: 60%;
position: relative;
margin-left: 40%;
}
<div id="page-wrap">
<div id="containerLeft">
<div id="faqBlock">
gfsag
</div>
</div><div id="containerRight">
<div id="blueBlock">
gfsag
</div>
</div>
</div>

Answer 2

All you need to assign is left:40% to your containerRight as it's already positioned relative
As your width of fixed container is 40%.
#page-wrap {
margin-top: 70px;
max-width: 100%;
border: 1px solid;
}
#containerLeft,
#containerRight {
vertical-align: top;
box-sizing: border-box;
height: 200vh;
border: 2px solid red;
}
/*-- Container Left --*/
#containerLeft {
width: 40%;
position: fixed;
}
#faqBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
background: #b82222;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
#blueBlock {
width: 70%;
height: 75vh;
margin: 50px auto;
display: block;
border: 2px solid orange;
background: blue;
box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.12);
}
/*-- Container Right --*/
#containerRight {
left: 40%;
width: 60%;
position: relative;
}
<div id="page-wrap">
<div id="containerLeft">
<div id="faqBlock">
gfsag
</div>
</div>
<div id="containerRight">
<div id="blueBlock">
gfsag
</div>
</div>
</div>