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

ここからはスタイルシートを書いていきます。
レイアウトは後回しにして、まずサイズを整えます。
LV2で作ったやつにちょっと手を加えるだけなのですぐ終わります。

スタイルシートを書く

枠用ID部分のところに手を加えるだけです。
#の前についていたtableとtd、vertical-align:top;を取り除くだけで終了です。

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

ポイント

ここでのポイントは、

1. paddingなどを加えたりしない

の１つです。

スタイルシートデザインでページを作るときはブラウザーによる解釈の違いに気をつける必要があります。
最も簡単にできる対策はレイアウト用のボックスにはpaddingやborderを指定しないことです。 これでずいぶんレイアウトの崩れが減ります。

確認

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

スタイルシートを書いた後

あとはメインコンテンツの部分を横に並べるだけですね。

次回はいよいよポジション関連のプロパティが登場します。