A `position:fixed` sidebar whose width is set in percentage?

Question

I've successfully used the beautiful Susy grid system to create a responsive layout similiar to the one of WebDesignerWall.com:

What i failed to implement is a position:fixed sidebar.

Such a sidebar would not scroll when the page is scrolled and stays on the same place. That's fantastically convenient (anyway, you actually can't put more content into the sidebar, because it would clutter the top of page in a narrow window).

My layout goes crazy whenever i apply position:fixed to a column: The colored blocks are declared three-column wide, but stretch further when position:fixed is applied to the sidebar..

I think the problem is that the width of the sidebar is relative, i. e. set in percentage. Due to position:fixed, the width is measured against the width of the browser window, not its container (though i set the container to position:relative).

The question is: how do i make a column fixed to the window while measuring its width against its container, not the viewport?

Maybe it's possible to fix the position of an element with JS?

PS I've tried the width: inherit solution, but it wasn't of any help to my situation.

Answer 1

The way to do it is with a second container. I don't know your exact code, but here's an example. Let's assume your structure is something like this:

<div class="page">
  <header class="banner">
    <h1>header</h1>
  </header>
  <nav class="navigation">
    <ul class="nav-inner">
      <li>navigation link</li>
    </ul>
  </nav>
  <article class="main">
    <h2>main content</h2>
  </article>
  <footer class="contentinfo">
    <p>footer</p>
  </footer>
</div>

The only important assumption I made there was ensuring an extra wrapper around my navigation sidebar. I have both the <nav> tag and the <ul> tag to work with. You can use any tags you want, as long as the sidebar has two that can be used for structure - the outer for a fixed container, and the inner for the sidebar itself. The CSS looks like this:

// one container for everything in the standard document flow.
.page {
  @include container;
  @include susy-grid-background;
}

// a position-fixed container for the sidebar.
.navigation {
  @include container;
  @include susy-grid-background;
  position: fixed;
  left: 0;
  right: 0;
  // the sidebar itself only spans 3 columns.
  .nav-inner { @include span-columns(3); }
}

// the main content just needs to leave that space open.
.main { @include pre(3); }

// styles to help you see what is happening.
header, article, .nav-inner, footer {
  padding: 6em 0;
  outline: 1px solid red;
}

Cheers.