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

<div>
 <p></p>
</div>
div, p {
 padding: 0;
 border : none;
 height : 100px;
 margin-top   : 0;
 margin-bottom: 0;
}

div {
 width: 80%;
 background:#ccc;
}

p {
 width: 200px;
 background:#ddd;
}

解答例1. margin-left:auto

pの右マージンを0, 左マージンをautoにします。

p {
 margin-right: 0;
 margin-left : auto;
}

autoの値は以下の式から導かれ、結果としてpはdivの中で右寄せされます。

解答例2. float:right

p {
 float :right;
 margin: 0;
}

浮動化という副作用を伴いますが、pはdivの中で右寄せされます。

解答例3. position:absolute

3-1. right:0

pをdivの右端に絶対配置する方法です。 divがpの包含ブロックを形成するように、divにはposition:relativeを指定します。

div {
 position: relative;
}

p {
 position: absolute;
 right   : 0;
 margin  : 0;
}

3-2. leftとネガティブマージン

rightの代わりにleftを使っても同様の表示結果にできます。 ブラウザのバグによりrightが効かない状況（IE6で実際にあります）で有効な方法です。

div {
 position: relative;
}

p {
 position   : absolute;
 left       : 100%;
 margin-left: -200px;
}

3-3. pの包含ブロックを初期包含ブロックにする場合

絶対配置の基準位置をdivではなく初期包含ブロックにする方法です。 pがちょうどdivの右端に位置するように、bodyとhtmlのmarginとpaddingを0にしておきます。

body, html {
 padding: 0;
 margin : 0;
}

p {
 position: absolute;
 right    : 20%;
 margin  : 0px;
}

解答例4. position:relative

position:relativeによりpを本来の位置からずらします。

4-1. margin-left:100% + right:200px

ボックスサイズが内容物に合わせた大きさへ強制的に調整される(IE6)バグのため、IE6ではうまくいきません。

p {
 margin-left: 100%;
 position   : relative;
 right      : 200px;/* left: -200pxでも可 */
}

ただし、この方法ではdirection:rtlの場合に、margin-leftの値が無視されautoとして計算されるので右寄せにはなりません（たとえmargin-right:autoを指定しても、「マージン詰め」が行われ、margin-right:0になる）。

4-2. margin-left:-200px + left:100%

p {
 margin-left : -200px;
 margin-right: auto;
 position    : relative;
 left        : 100%;/* right: -100%でも可 */
}

margin-right:autoはpのwidthと左右マージンが「制約過多」にならないようにするためで、これがないとdirection:rtlの場合にmargin-leftの値が無視されてしまいます。

反則技 max-width

div {
 max-width: 201px;
}

p {
 margin-left : 1px;
}