Two equal columns portfolio

How to achieve the behavior of fixed left column and a scrollable right column?

8 Replies

Wolle•2y ago

Two ideas come to my mind: 1) position: fixed; width: var(--sidebar-width); and margin-left: var(--sidebar-width); 2) use grid at the parent and position: sticky on your sidebar (you might need a wrapper-div around your sidebar with height: 100%)

Dayo•2y ago

I'd use flex and just use flex basis so parent container - display: flex; align-items:start; flex-basis:100%; gap: 24px; min-height: 100vh fixed left column - position:sticky; top:0; flex-basis: 35% scrollable right column - flex-basis: 65%

mediocre coderOP•2y ago

the position sticky works but the top 0 makes the left column push to the top, any tips on how can I achieve the left column to stay fixed to its original position like the first picture?

13eck•2y ago

Something like this:

main {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex-grow: 1;
}

.mainbar {
  flex-grow: 999;
  overflow: scroll;
}

main {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex-grow: 1;
}

.mainbar {
  flex-grow: 999;
  overflow: scroll;
}

<html>
<head></head>
<body>
  <main>
  <div class="sidebar">
   <!-- sidebar contents goes here -->
  </div>
  <div class="mainbar">
   <!-- all other content goes here -->
  </div>
  </main>
</body>
</html>

<html>
<head></head>
<body>
  <main>
  <div class="sidebar">
   <!-- sidebar contents goes here -->
  </div>
  <div class="mainbar">
   <!-- all other content goes here -->
  </div>
  </main>
</body>
</html>

The overflow:scroll; means that specific element will have a scroll bar instead of overflowing the container.

Dayo•2y ago

an overflow of auto would work too

Dayo•2y ago

https://play.tailwindcss.com/YXVbdOniXw

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

mediocre coderOP•2y ago

I tried position fixed on the left side and it works what I wanted but what makes them go on top of each other? .container { max-width: 1200px; margin: 0 100px; padding: 90px 80px; display: flex; gap: 2rem; min-height: 100vh; } .left-column { position: fixed; width: 50%; } .right-column { width: 50%; }

13eck•2y ago

position: fixed takes the element out of the document flow and positions it in a specific place. In this instance, you're not telling it where to go so it goes to the upper-left of the containing stacking context…which is where the .right-column is also :p That's why you should be using flexbox or grid. Setting position on an element should be done as a last resort when nothing else will work because it takes more time/effort to make it work right.

Gaming

Programming

Two equal columns portfolio