左右に並んでくれない
まず、floatの基本的な指定方法を確認しましょう。
container(1000px)の中にside(300px)とmain(600px)を横並びにさせる場合です。
index.html
<div id="container"> <div id="side">ダミーテキスト</div> <dic id="main">ダミーテキスト</div> </div>
style.css
#container{
width:1000px;
}
#side{
width:300px;
float:left;
}
#main{
width:600px;
float:right;
}
重要なのは、並べる要素の横幅の合計がcontainerの幅を超えてはいけないことです。 つまり今回は300px＋600pxで、containerの1000pxを超えないので問題ありません。
このような手順で横並びにならない場合、以下のような理由が考えられます。
width以外の要素で横幅が大きくなってしまっている
widthを指定しても、左右のpaddingやborderが設定されていると、その分実際の横幅に足されて大きくなってしまいます。
marginは、要素の横幅には足されませんが、横に並べる際にはmarginの入るスペースも考慮しなければなりません。
つまり、
#sideのwidth＋左右margin＋左右padding＋左右border ＋
#mainのwidth＋左右margin＋左右padding＋左右border
の合計が#containerの1000pxを超えてはいけないということです。