3

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.

Simplified HTML:

<div class="page">
    <div class="content"></div>
    <div class="sidebar">
        <div class="widget1"></div>
        <div class="widget2"></div>
    </div>
</div>

CSS:

.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;
}

The problem: widget1 gets taken out of the flow by adding position:fixed. 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.

What I need: have widget1 (with a percentage of padding) fit the full width of sidebar.

The closest solution I've found suggests to add width:inherit 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.

Any insight or suggestions would be greatly appreciated. I'd prefer a CSS solution, but I'm not against using jQuery.

If it helps, I'm working on a responsive theme based on Twenty Ten. The site is here: http://odin.reaktortest.no/hvorfor-velge-fixit/ It's the beige box I'd like to keep fixed (#iwajax_contact_widget-2).

Community
  • 1
  • 1
sarahjadesigns
  • 173
  • 3
  • 13
  • how do you mean it gets resized? – Matt Saunders Oct 03 '13 at 14:52
  • @MattSaunders At the page's max-width the widget takes up 28% / 280px of the page's width without fixed positioning. With fixed positioning it spills out to the right and becomes 435px. The height also changes. Making the viewport smaller makes it smaller than 435px, so it seems like it's using the percentage from something else... – sarahjadesigns Oct 04 '13 at 05:21
  • Edited my question because I figured out the problem, although not how to fix it yet. – sarahjadesigns Oct 04 '13 at 06:11

2 Answers2

1

You can solve this by jquery

var new_width = $('#sidebar').width();
$('.widget').width(new_width);
  • This comes close to fixing it, but the widget spills out the right of its parent divs (`.page` and `.sidebar`). The amount it spills out appears to be the size of the left and right padding combined. I tried adding `box-sizing:border-box` to the widget's CSS, but this did not fix the problem. – sarahjadesigns Jun 30 '14 at 08:47
-1

Apply your parent tag position:relative and then apply to your sidebar as position:fixed and try with this too z-index:9999.

thanks.

Krunal Shah
  • 2,083
  • 12
  • 27