Mixing a few position:fixed Div's

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?

Try to resize the page and you will see the problem is there. — AngularOne, Sep 29 '15 at 20:40

score 2 · Answer 1 · answered Sep 29 '15 at 20:32

2

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.

answered Sep 29 '15 at 20:32

rajuGT

6,224
2
26
44

What about the overflow-x (scroller) that now appears? It means the 100% is more than the real page size. I'm trying to avoid any horizontal scroller. – AngularOne Sep 29 '15 at 20:36
Oh use 99%. Thats why you will see in most of the code 99%. just google 99% width or http://stackoverflow.com/questions/6435695/html-fullscreenlayout-with-min-width-max-width or use the solution provided here http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – rajuGT Sep 29 '15 at 20:42
I must say that not only is calc() fine, since it is supported by all major browsers. Using 99% just to make the content fit is a very, very, very nasty hack to make your page fit – Gust van de Wal Sep 29 '15 at 21:00

score 1 · Accepted Answer · answered Sep 29 '15 at 21:02

1

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;                       
}

answered Sep 29 '15 at 21:02

Gust van de Wal

5,211
1
24
48

Your solution has really solved it, with no horizontal scroll. I also think calc() is fine to use. – AngularOne Sep 30 '15 at 12:25

Mixing a few position:fixed Div's

2 Answers2