How to fix this common problem of position:fixed elements not expanding to its parent width?

Question

Have a look at this fiddle: http://jsfiddle.net/h4VS7/

How do I make the yellow element align (horz) with the grey background no matter how the window is resized? I refuse to believe it can't be done with css. Yes, js hacks and Scroll Follow plugin works but lags.

Please, anyone?

Edit:

Found a solution. If the container margins are expressed as percentages the content part can be expressed as the remainder percentage. See here: http://jsfiddle.net/h4VS7/1/

Though not sure why it doesn't align perfectly. It should I think. Could be jsfiddle margin/padding related.

Answer 1

It's not particularly difficult if you don't mind adding an extra element to wrap .top:

http://jsfiddle.net/Ud3ZQ/

---

And also, a properly aligning (well, almost) version of your solution:

http://jsfiddle.net/h4VS7/3/

The problem was that jsFiddle loads http://fiddle.jshell.net/css/result-light.css:

body {background: white; padding: 10px;  }

Anything is more specific than * (including body), so the padding was being applied, regardless of * {padding:0; margin:0}