Make 50% of div not the browser width

Question

I have .left-navbar and .columns-wrapper in which are two columns, .left-column and .right-column. The first column and second one has 50% of .columns-wrapper until I add position: fixed to .right-column and .right-column takes 50% of browser width not .columns-wrapper.

.page-wrapper {
  width: 100vw;
  height: 100%;
  display: flex;
  background: red;
}

.page-wrapper .left-navbar {
  width: 88px;
  height: 100%;
  background: yellow;
}

.page-wrapper .columns-wrapper {
  width: calc(100% - 88px);
  height: 100%;
  background: orange;
  display: flex;
}

.page-wrapper .columns-wrapper .left-column {
  width: 50%;
  height: 100%;
  background: red;
}

.page-wrapper .columns-wrapper .right-column {
  width: 50%;
  height: 100%;
  background: green;
}

<div class="page-wrapper">
  <div class="left-navbar">

  </div>
  <div class="columns-wrapper">
    <div class="left-column"></div>
    <div class="right-column"></div>
  </div>
</div>

please, can you edit your question adding a https://stackoverflow.com/help/minimal-reproducible-example (minimal reproducible example) — Giuppox, Nov 20 '20 at 07:52
`The fixed element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport` from [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position) — Sfili_81, Nov 20 '20 at 07:53

score 1 · Accepted Answer · answered Nov 20 '20 at 07:54

1

Set columns-wrapper position to relative, and left-column and right-column position to absolute. Absolute position is related to the ancestors container which has the position value of relative.

position: fixed is related to the whole browser position, rather than its parent containers.

.page-wrapper .columns-wrapper {
  position: relative;
  ...
}

.page-wrapper .columns-wrapper .left-column {
  position: absolute;
  ...
}

.page-wrapper .columns-wrapper .right-column {
  position: absolute;
  ...
}

answered Nov 20 '20 at 07:54

wangdev87

8,611
3
8
31

I want to add to the right column `position: fixed` to stay in the place when scrolling – sales.bzielinski Nov 20 '20 at 08:28
`.right-column` takes 50% of div when is `position: absolute;` and it's a good. But when I want to add `position: fixed` it takes 50% of body not `.columns-wrapper` – sales.bzielinski Nov 20 '20 at 08:31
Please raise it as another question. – wangdev87 Nov 20 '20 at 08:39

score 0 · Answer 2 · answered Nov 20 '20 at 08:10

That behavior is completly normal as when you use a fixed position the element is removed from the normal content flow.

#wrapper {
    width: 500px;
    background-color: cyan;
}

.w-1\/2 {
    width: 50%;
    background-color: red;
    height: 100px;
}

.fixed {
    position: fixed;
    width: 50%;
    height: 50px;
    background: yellow;
}

<div id="wrapper">
  <div class="w-1/2">
  </div>
  
  <div class="fixed">
  </div>
</div>

As you can see in example bellow even if I set it width to 50% It doesn't take the 1/2 space of the #wrapper but for the body element.

#wrapper {
    width: 500px;
    background-color: cyan;
}

.w-1\/2 {
    width: 50%;
    background-color: red;
    height: 100px;
}

.fixed {
    position: fixed;
    top: 0;
    left: 50%;
    width: 50%;
    height: 50px;
    background: yellow;
}

<div id="wrapper">
  <div class="w-1/2">
  </div>
  
  <div class="fixed">
  </div>
</div>

Make 50% of div not the browser width

2 Answers2