Mixing a few position:fixed Div's - html

Question

Here is the html & css problem I'm trying to solve:
HTML & CSS:
#fixedLeftMenu {
display: inline-block;
height: 50px;
background-color: yellow;
width: 25px;
position: fixed;
}
#container {
display: inline-block;
background-color: orange;
width: calc(100% - 25px);
margin-left: 25px;
}
#redFixedDiv {
height: 100px;
background-color: red;
width: 25%;
position: fixed;
}
#blueDiv {
float: right;
height: 1000px;
background-color: blue;
width: calc(100% - 25%);
}
<div id="fixedLeftMenu"></div>
<div id="container">
<div id="redFixedDiv">
</div>
<div id="blueDiv"></div>
</div>
The yellow div is a fixed div with a fixed width.
The red div is a fixed div but % width.
The blue is % width;
You can see that the red and blue div's DO NOT match 100% width (the orange div container) as excepted.
The red div is being over the blue one.
If I remove the fixed position of the red, everything will be OK, but I do want it to be fixed. It maybe complex html, but I really trying to solve it. Is it possible? What I'm missing here that causes that html/css behavior?

Answer 1

Here is the fix for your problem.
#fixedLeftMenu {
display:inline-block;height: 50px;background-color:yellow;
width: 25px;
position: fixed;
}
#container {
display:inline-block; background-color:orange;
width: 100%;
margin-left: 25px;
}
#redFixedDiv {
height: 100px; background-color: red;
width: 25%;
position: fixed;
}
#blueDiv {
float:right;height: 1000px;background-color: blue;
width: 75%;
}
Its not the problem of position:fixed. Just avoid calc function. That too like calc(100% - 25px). I'm not sure how browser is calculating, but your code should not depend on it, I feel. Developer/Designer should design all the components width/height/position manually, so everything works out well.

Answer 2

Since an element with a fixed position doesn't look at its parents width when it's given a percentage width, you will need to adjust the width in the calc, so that it has accounted for the 25px margin. What I've done to the code below is first get the pagewidth - 25px, then divide it by 4 to get 25%
#redFixedDiv{
height: 100px; background-color: red;
width: calc((100% - 25px) / 4);
position: fixed;
}