テーブルタグを除去する４

最後にレイアウトを整えるためのスタイルシートを書いて完成です。 レイアウトするための方法はいろいろありますが、今回はfloatプロパティを使います。

スタイルシートを書く２

枠用ID部分のところに手を加えるだけです。
floatプロパティとclearプロパティを追加しました（赤字の部分）。

/*枠用ID*/
#structure{
    background-color:#FFFFFF;
    width:700px;
    text-align:left;
    margin:0px auto;
}
#head{
    width:700px;
    background-color:#7F2D00;
}
#main-left{
    width:300px;
    float:left;
}
#main-right{
    width:400px;
    float:left;
}
#foot{
    width:700px;
    clear:both;
}

ポイント

ここでのポイントは、

1. clear:both;を忘れない

の１つです。

floatプロパティを使うとボックスが横に詰めて表示されるので、段組を作ることができます。 幅を調節すれば3段組レイアウトなども簡単に作れます。
floatを使ってレイアウトを組むとき最も気をつけなければいけないのは、 floatさせたボックスの後に来る要素（今回はfootボックス）に必ずclearプロパティを指定することです（値はbothがおすすめ）。 これを忘れるとレイアウトが崩れてしまうことがあります。

確認

できたらブラウザーでどのように表示されるか見てみましょう。

テーブルタグ除去前
テーブルタグ除去後

よ〜く見比べると微妙に違いますが、これはテーブルにデフォルトで指定されているmarginなどのせいです。

テーブルタグを使わなくても、高度なレイアウトが組めること分かってもらえたでしょうか？
制作実習編LV3ではまた違った方法でレイアウトを組んでみます。