0

I have the following HTML and CSS

section {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1147px;
  padding-right: 0;
  padding-left: 0;
}

.first_div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}

.first_child_div {
  max-width: calc(60% - 9px);
  width: 100%;
}

.second_child_div {
  max-width: calc(34% - 9px);
  width: 100%;
  position: fixed;
}
<section>
  <div class="first_div">
    <div class="first_child_div">First child</div>
    <div class="second_child_div">Second child</div>
  </div>
</section>

And the template looks basically like this.

Template

enter image description here

*EDITED But for some reason when I scroll up and down, the second child div is still following the flow of the page. But I want it to always stays in the same place even if the page is scrolled. Is there something I'm missing? Thank you for your help.

4

4 Answers 4

0

You should remove position: fixed to second div.

0

check your id selector, you use hash character instead of full stop. because you are using page element class not ID.

.first_child_div {} .second_child_div {}

also you also use second child div style position:fixed; try to change it to relative

1
  • I think my explanation was off. I tried to reformulate my question. What I want it is for the second child div to stay on the same place while I'm scrolling. I want it to be fixed relative to the window. But when I'm using position fixed; the element is still behaving like it's relative to the parent div element.
    – Kenny
    Feb 10, 2020 at 16:48
0

Fixed means:

The element is placed in the same position on every page.

So it means, whenever you scroll, this element will be on the same position.

If you want that your element to be scrolled:

#second_child_div{
    max-width: calc(34% - 9px);
    width: 100%;
    position: static;
}

"Position: static" means that:

The element is positioned according to the normal flow of the document.

1
  • I think my explanation was off. I tried to reformulate my question. What I want it is for the second child div to stay on the same place while I'm scrolling. I want it to be fixed relative to the window. But when I'm using position fixed; the element is still behaving like it's relative to the parent div element.
    – Kenny
    Feb 10, 2020 at 16:54
0

section{
    max-width: 1147px;
    padding-right: 0;
    padding-left: 0;
}

#first_div{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content:space-between;
     position: relative;

  /*Extra style */
    background: #f7f7f7;
    padding: 1rem;
}

#first_child_div{
    max-width: calc(60% - 9px);
    width: 100%;
  /*Extra style */
    background: #e8e8e8;
}

#second_child_div{
    max-width: calc(34% - 9px);
    width: 100%;
    position: fixed;
    right: 0;
    top: 1rem;
 /*Extra style */
    background: #e8e8e8;
}
<section>
    <div id="first_div">
        <div id="first_child_div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div id="second_child_div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</section>

2
  • I think my explanation was off. I tried to reformulate my question. What I want it is for the second child div to stay on the same place while I'm scrolling. I want it to be fixed relative to the window. But when I'm using position fixed; the element is still behaving like it's relative to the parent div element.
    – Kenny
    Feb 10, 2020 at 16:54
  • I updated my answer, kindly check and let me know if this satisfy your query Feb 10, 2020 at 18:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.