1

I've got a relative div with a width of 40%. After that there is a fixed div that needs to inherit this width.

So I set my html document to this:

<div class="sidebar"></div>
     <div class="maincontent">
        <div class="fixed--wrapper">
           <div class="fixed--header">
        </div>
     </div>
</div>

And my css:

.sidebar {
   width: 20%;
   height: 100vh;
   overflow: hidden;
   position: fixed;
   background-color: #000;
   color: #fff;
   float: left;
}

.maincontent {
    float: right;
    position: relative;
    width: 80%;
    background-color: #D00;
    height: 300px;
}

.fixed--wrapper {
    width: 40%;
    position: relative;
    float: left;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    height: 100%;
    overflow-y: scroll;
    background-color: #E00;
}

.fixed--header {
   height: 60px;
   width: inherit;
   position: fixed;
   z-index: 2;
   background-color: #fff;
}

Now the problem arises that my fixed--header is like 8% bigger than the fixed--wrapper. To illustrate this view the following fiddle: https://jsfiddle.net/zj0Lpu0q/1/

I want my fixed--header to be 40% as well.

Sidenote: I know there are quiet the number of questions about this, but I couldn't find one that has a relative div with widths in percentages defined. Therefore I created this new question. If you could link me to another answer I'm happy as well.

user3473484
  • 13
  • 2
  • My question is is there is any reason you set the fixed header in side the wrapper ? – Baezid Mostafa Nov 06 '16 at 11:17
  • There is a list of items as well in the wrapper that is set relatively. This is just a fixed header on top of the list where a user can search. Since these are related to each other I put it inside the wrapper. Any solutions for taking it outside the wrapper? – user3473484 Nov 06 '16 at 11:28
  • Instant I just change the width 30% for fixed header and need 2 media query for this. If I found better solution then I will post as an answer. – Baezid Mostafa Nov 06 '16 at 11:55

1 Answers1

0

Try replacing your css to this

.fixed--wrapper {
width: 40%;
position: relative;
float: left;
border-right: 1px solid rgba(0, 0, 0, 0.2);
height: 100%;
overflow-y: scroll;
background-color: #E00;}

.fixed--header {
height: 60px;
position:absolute;
width:100%;
z-index: 2;
background-color: #fff;}
Dan Triva
  • 71
  • 8
  • Yea, I'm aware of that and that will solve the issue described above, but I need it to be visible at all times. When I start scrolling it will dissapear this way so I need position: fixed. Therefore a fixed header. – user3473484 Nov 06 '16 at 11:33
  • Then I think you will find your answer here [Fixed Position but Relative to Container](http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container) – Dan Triva Nov 06 '16 at 11:40