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.
padding:7.15%; /* 20px of 280px */
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
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 (