ブロックボックスの右寄せの解答

ブロックボックスの右寄せの解答です。この問題の意図は、ボックスとその包含ブロックの関係を意識させることでした。スタンダードな解答として想定していたのは以下の3つ。

pにmargin-left:auto（ボックスと包含ブロックに関する等式からautoの値が求まる。）
pにfloat:right（右フロートは包含ブロック内で右に寄せられる。）
divにposition:relative, pにposition:absoluteとright:0;（絶対配置ボックスの包含ブロックは、間近のpositionの値がstaticでない親要素が形成する。）

また、この問題のポイントはdivの幅が80%で可変であるのに対し、pは200pxと固定されていることです。 CSS2.1では値に計算式（'100%-200px'など）を使えないので、異なる単位（今回は%とpx）を組み合わせた位置指定が困難です。これをどう実現するか。

解答例ではmarginとpositionを併用することで実現しています。