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