I am a little bit tired right now (out of coffee), so I am unable to figure this out.
When I set p.style.width = auto
(the blue one), why is its w
It's all explained in the spec
http://www.w3.org/TR/CSS2/visudet.html#blockwidth
O.O
Essentially, auto means taking all the other specified paddings, borders and margins into account, fill the remaining space (assuming only the width is set to auto). So effectively 100% minus borders, padding and margins.
To fix, just set it to match the other elements, or stick them all in a containing element with a set width.