左右に並んでくれない

まず、floatの基本的な指定方法を確認しましょう。

container(1000px)の中にside(300px)とmain(600px)を横並びにさせる場合です。

index.html
1<div id="container">
2   <div id="side">ダミーテキスト</div>
3   <dic id="main">ダミーテキスト</div>
4</div>
style.css
01#container{
02    width:1000px;
03}
04#side{
05    width:300px;
06    float:left;
07}
08#main{
09    width:600px;
10    float:right;
11}

重要なのは、並べる要素の横幅の合計がcontainerの幅を超えてはいけないことです。 つまり今回は300px+600pxで、containerの1000pxを超えないので問題ありません。

このような手順で横並びにならない場合、以下のような理由が考えられます。

width以外の要素で横幅が大きくなってしまっている

widthを指定しても、左右のpaddingやborderが設定されていると、その分実際の横幅に足されて大きくなってしまいます。

marginは、要素の横幅には足されませんが、横に並べる際にはmarginの入るスペースも考慮しなければなりません。

つまり、
#sideのwidth+左右margin+左右padding+左右border +
#mainのwidth+左右margin+左右padding+左右border
の合計が#containerの1000pxを超えてはいけないということです。

PAGE TOP