ブロックレベル要素の幅を設定すると、そのコンテナの端からはみ出して引伸ばされることを防ぐことができます。
コンテナ内の左右中央に配置するためには margin: auto; を使用します
要素は、指定された幅になり、残りのスペースは左右のマージンへ均等に分割されます：
チップ: 中央揃えは、width プロパティを設定していない（または 100% に設定している）場合には効果がありません。
チップ: テキストの行揃は、 CSS テキスト 章を参照してください。
要素を整列するための一つの方法は、position: absolute; を使用することです：
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Try it Yourself ❯
注: 絶対配置の要素は、通常のフローからは削除され、要素をオーバーラップすることができます。
チップ: position で要素を整列するときは、常に<body> 要素に
margin と padding を定義します。
これは、ブラウザごとの見た目の違いを避けるためです。
position を使用した時に、IE8 以前には問題もあります。
コンテナ要素（このケースでは <div class="container">）が指定された幅を持っており、尚且つ !DOCTYPE 宣言がない場合、
IE8 以前のバージョンでは、右側に 17px のマージンを追加します。
これは、スクロールバー用に予約されたスペースと思われます。したがって、positionを使用するときには、
必ず !DOCTYPE 宣言を設定します：
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Try it Yourself ❯
要素を整列するもう一つの方法は、float プロパティを使用することです：
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Try it Yourself ❯
チップ: float で要素を整列するときは、必ず <body> 要素に
margin と padding を定義します。
これは、ブラウザごとの見た目の違いを避けるためです。
float を使用した時に、IE8 以前には問題もあります。
!DOCTYPE 宣言がない場合、IE8 以前のバージョンでは、右側に 17px のマージンを追加します。
これは、スクロールバー用に予約されたスペースと思われます。したがって、floatを使用するときには、
必ず !DOCTYPE 宣言を設定します：
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
}
Try it Yourself ❯