title: Item with fixed position in responsive layout
body: <p>I'm working on a responsive layout and I would like a widget to remain fixed/sticky, meaning it'll follow you as you scroll down the page.</p>
  
  <p>Simplified HTML:</p>
  
  <pre><code>&lt;div class="page"&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;div class="sidebar"&gt;
          &lt;div class="widget1"&gt;&lt;/div&gt;
          &lt;div class="widget2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.page {
      width:96%;
      max-width:1000px;
      margin:0 auto;
  }
  .content {
      width:65%;
  }
  .sidebar {
      width:28%;
      float:right;
  }
  .widget1 {
      position:fixed;
      padding:7.15%; /* 20px of 280px */
      z-index:10;
  }
  </code></pre>
  
  <p><strong>The problem:</strong> <code>widget1</code> gets taken out of the flow by adding <code>position:fixed</code>. This results in the padding percentage being calculated from the body and completely ruining my layout. Because it's removed from the flow, it also no longer takes up 100% width of the sidebar.</p>
  
  <p><strong>What I need:</strong> have <code>widget1</code> (with a percentage of padding) fit the full width of <code>sidebar</code>.</p>
  
  <p><a href="https://stackoverflow.com/questions/5873565/position-fixed-relative-to-parent-div">The closest solution I've found</a> suggests to add <code>width:inherit</code> on the fixed element. This works great, but only if the parent's width is set in pixels, not in percentage. It also doesn't help with the fact that I need to add padding.</p>
  
  <p>Any insight or suggestions would be greatly appreciated. I'd prefer a CSS solution, but I'm not against using jQuery.</p>
  
  <p>If it helps, I'm working on a responsive theme based on Twenty Ten. The site is here: <a href="http://odin.reaktortest.no/hvorfor-velge-fixit/" rel="nofollow noreferrer">http://odin.reaktortest.no/hvorfor-velge-fixit/</a>
  It's the beige box I'd like to keep fixed (<code>#iwajax_contact_widget-2</code>).</p>