CODEWITHSUNDEEP
htmlcssflexboxcss-position
JordanMiguel
JordanMiguel

Reputation: 740

Position fixed on flex sidebar's

I'm working on a 3-column page, a sidebar to the left & right, with a middle section.

I wan't the two sidebars to be fixed when I'm scrolling down the page - only the main should be moving.

Here is the code for each sidebar (they are identical) -

.sidebar {
width: 19%;
background-color: white;
order: 3;
padding-right: 34px;
}

and here is the middle which will be scrollable -

.site-main{
flex: 1;
order: 2;
background: #eee;
}

Important to note that the page wrapper is set to display:flex

position:fixed isn't doing the trick. Here's a codepen

Upvotes: 0

Views: 305

Answers (2)

David Lee
David Lee

Reputation: 2100

You need to set both sidebars to fixed, make the height 100%. Second sidebar needs right 0 so it sits to the right. Need z-index so it doesn't sit on top of your footer. Main needs margin-left and margin-right so it isn't hidden by your first and second sidebar.

.sidebar-first {
    ...
    position:fixed;
    height: 100%;
    z-index: 1;
    ...
}

.sidebar-second {
    ...
    position:fixed;
    height: 100%;
    right: 0;
    z-index: 1;
    ...
}

.header, 
.footer {
    ...
    z-index: 2;
    ...
}

.main {
    ...
    margin-left: 20%;
    margin-right: 20%;
    ...
}

EDIT: Included margin-right: 20%; on .main as your second sidebar will hide your main content.

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371113

.sidebar-first {
  width: 20%;
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.sidebar-second { 
  width: 20%;
  background: #ddd;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}


body {
  margin: 0;
}

.wrapper {
  min-height: 100vh;
  background: #ccc;
  display: flex;
  flex-direction: column;
}

.content {
  display: flex;
  flex: 1;
  background: #999;
  color: #000;
}

.columns {
  display: flex;
  flex: 1;
}

img {
    max-height: 100%;
    max-width: 100%;
}

.main {
  margin: 0 auto;
  background: #eee;
}

.sidebar-first{
  width: 20%;
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}
.sidebar-second{ 
  width: 20%;
  background: #ddd;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
}
<div class="wrapper">
  <section class="content">
    <div class="columns">
      <main class="main">
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
        <div class='image-1'>
          <img src="https://images.cdn.fourfourtwo.com/sites/fourfourtwo.com/files/styles/image_landscape/public/lacazette-cropped_1du1hebls4tv11c8ef7kdpyok1.jpg?itok=Lh3EAtTj&c=87b6d99828d88c1b8ffe17a08d24fc7d">
        </div>
      </main>
      <aside class="sidebar-first">Sidebar first: Fixed width</aside>
      <aside class="sidebar-second">Sidebar second: Fixed width</aside>
    </div>
  </section>
</div>

Upvotes: 2

Related Questions