html - Mixing a few position:fixed Div's -


here html & css problem i'm trying 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 fixed div fixed width.
  • the red div fixed div % width.
  • the blue is % width;

you can see red , blue div's not match 100% width (the orange div container) excepted. red div being on blue one.

if remove fixed position of red, ok, want fixed. maybe complex html, trying solve it. possible? i'm missing here causes html/css behavior?

since element fixed position doesn't @ parents width when it's given percentage width, need adjust width in calc, has accounted 25px margin. i've done code below first pagewidth - 25px, divide 4 25%

#redfixeddiv{     height: 100px; background-color: red;       width: calc((100% - 25px) / 4);     position: fixed;                        } 

Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -