2カラムレイアウトの作成

2カラムレイアウトの作成

#08 2カラムレイアウトを作ろう
http://dotinstall.com/lessons/website_html/9008
を参考に
CSSでレイアウトの設定をして2カラムにする

このため、mycss.css を作成し編集

まず、
#container のところで横幅を指定

width:600px;
で固定
さらに、中央寄せにしたいので
margin: 0 auto;
としておく

#header
で margin-bottom:15px;
として余白設定

#menu
で margin-botton:15px;
でこちらも余白設定

#contents は
float:left;
で左よせにして記事を書く
width:400px;
と固定にしておく

#sidebar は
float:right で右によせてサイドバーにする
width:180px;
とこちらも固定

footer 部分の割り込み防止のため
#mainで
overflow:hidden;
そして、余白をいれたいので
margin-bottom:15px;
としておく

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です