cozyのひとりごと

テストでhtmlを真っ白な状態の最初から作る

divタグで囲むブロック要素

ボディ
ヘッダ
左コンテンツ
右コンテンツ
フッタ

これで通販サイトに多い逆L字レイアウトとなる

CSSは
#body{
width: 800px;
margin-left: 5%;
margin-right: 5%;
border-color: #cccccc;
border-style: solid ;
border-width:1px;
color: #666666;
}
/* ヘッダー */
#header{
width: 800px;
height: 200px;
background-color: #FFFF00;
}

/* フッター */
#footer{
width: 800px;
height: 200px;
background-color: #006600;

}

/* 左コンテンナ */
#lcon{
width: 250px;
height: auto;

float: left;
background-color:#3333FF
}

/* 右コンテナ */
#rcon{

width: 550px;
height: auto;
float: right;
background-color:#CC0000
}

各ブロックにbackground-colorを指定
これで位置関係がよく分かる

各ブロックに画像、文章をコピペする
思いどおりの位置になった
フッタは左コンテナの下に回り込んでしまった
フッタの前に回り込み回避のタグとCSSが必要か

+++++++++++++++++++++++++++++++++++++++++++++++++++++++
きっちりと理解せず適当に作ってしまっているので
不用タグが多くレイアウトが上手くいかなかったようです。
皆様、このCSSが変な書き方だと思ったら、ご指導お願いいたします。

+++++++++++++++++++++++++++++++++++++++++++++++++++++
/* フッター */
#footer{
clear:　both;
width: 800px;
height: 80px;
background-color:　#ABE0E5;

としました。
次は各div要素の中身です。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
上手くいったらbackground-colorは削除、
または見栄の良い色か画像に変えます。

オーサリングツールにたよりすぎてhtmlを書いていた弊害です。