After a bit more research and trial and error I’ve figured out the problem, but not the solution. Below is a better explanation of the problem.
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).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
To your first post (haven’t read your second sorry) this seems to work for me:
@media screen and (min-width: 767px) {
#primary {
position: fixed;
right: 0;
}
}
Edit: There’s an issue with it not quite overlapping the footer but you can resolve it by adding a z-index to ‘#primary‘.
Thanks for the response Andrew. While this solution helps with the positioning of the fixed sidebar, it doesn’t solve the problem of the sidebar or widget getting re-sized. The reason this happens is detailed in my 2nd post.
