固定幅での３カラムレイアウト

固定幅での３カラムレイアウト

#06 3カラムのレイアウト (固定幅)
http://dotinstall.com/lessons/website_html/9006
を参考に
固定幅での3カラムレイアウトを作成

CSSファイルを編集して配置を設定

初期状態のCSSが
ソースになかったので
メモ
とりあえず、これを base.css
としておいて、今後の練習に使うことに

/* mycss.css */

#container {
    width: 500px;
    margin: 0 auto;
}

#header {
    background-color: red;
}
#main {
    background-color: blue;
}
#footer {
    background-color: green;
}

#left {
    background-color: pink;
}
#center {
    background-color: orange;
}
#right {
    background-color: purple;
}

まずは、レイアウトを変えるため

#left{
background-color:pink;
float:left;
width:100px;
}

#center{
background-color:orange;
float:left;
width:300px;
}

#right{
background-color:purple;
float:left;
width:100px;
}

というようにする

width は

幅の指定

float は回りこみの指定

また、footer 部分が割り込んでこないように
overflow:hidden;
を
#main のところに追加しておく

このレイアウトを変更せずに
#center 部分に余白を１０px入れるなら

margin-left:10px;
margin-right:10px;
width:280px;

というように、幅を全体の３００から引いて合わせる

また、上下に余白設定も可能だけど
注意点あり

もし、 #header と #main の間に余白をいれたいなら
#header のほうへ
margin-bottom:20px;
というように指定する

これを #main のほうでも
margin-top:50px;
で指定してしまうと
マージンの相殺が発生する

これはお互いに打ち消しあって
大きいほうの設定だけが有効になる
つまり
margin-top:50px だけ有効になる