0

I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.

My question is; How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.

I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.

Or is it possible with pure CSS? (Also I'm using TailwindCSS)

Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)

enter image description here

enter image description here

Also here is a gif;

click

Aniket Das
  • 188
  • 1
  • 11
I. Kaya
  • 49
  • 8

1 Answers1

0

You can use the following CSS code in the element which needs to stop position: sticky; bottom: 0

Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?

Hope this answers your question!

Edit: [Try this out]

.main {
  width: 100%;
  height: 1000px;
  display: flex;
}

.first {
  width: 30%;
  background-color: red;
}

.second {
  width: 40%;
  background-color: green;
}

.third {
  width: 30%;
  background-color: blue;
  height: 500px;
  position: sticky; 
  top: 0px;
}

p {
  margin-left: 20px;
}
<div class="main">
  <div class="first">
    <p>
      Left content.
    </p>
  </div>

  <div class="second">
    <p>
      Main content.
    </p>
  </div>
  <div class="third">
    <p>
      Right content.
    </p>
  </div>
</div>
Atheesh Thirumalairajan
  • 625
  • 1
  • 2
  • 13
  • Should I create another div for sticky? Because I'm using flexbox for layout. Like this: https://jsfiddle.net/XpDeviL/sqh7mw8n/1/ – I. Kaya Jan 04 '21 at 11:47
  • This is not exactly what I want. With this, you shoud scroll to end of the page to see the bottom of the third div. I want something just like this: [link](https://imgur.com/eljA2Bo) – I. Kaya Jan 05 '21 at 18:01