Dreamweaver

コラム

2コラムの復習をしてみたが、footerを横並びにする方法を忘れてしまった。。。


htmlコード

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]
[html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"]
[head]
[meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /]
[meta name="keywords" content="2コラム,二段組み,レイアウト" /]
[meta name="description" content="2コラムのコードを書いていきます"/]
[title]2コラムレイアウト[/title]
[link href="080802_2Column.css" rel="stylesheet" type="text/css" /]
[/head]
[body]
[div id="container"]
[div id="header"]
[h1]2コラムの組み方[/h1]
[/div]
[div id="wrapper"]
[div id="contents"]
[h2]2コラムの例[/h2]
[p]
[img src="images/080802_2Column_1.jpg" alt= width="300" width="600" height="575" border="1"/][/p]
[/div]
[div id="nav"]
[ul]
[li]HOME[/li]
[li]2コラムとは[/li]
[li]Dreamweaver[/li]
[li]レイアウト[/li]
[li]float属性[/li]
[li]clear属性[/li]
[/ul]
[/div]
[/div]
[div id="footer"]
[ul]
[li]お問い合わせ[/li]
[li]サイトマップ[/li]
[li]会社概要[/li]
[/ul]
[address]
2コラム
[/address]
[/div]
[/div]
[/body]
[/html]

CSSコード

@charset "Shift_JIS";

#nav {
float:left;
font-size:47px;
text-align:left
}

body {
font-family:
Meiryo,
"メイリオ",
Osaka,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3"
"MS P Gothic"
"MS Pゴシック",
sans-serif;
font-size:150%;
color:#000000;
margin: 0;
padding: 0;
background: #ffffff;
}

#contents {
float:right;
}

#wrapper {
border-style:none;
}

#footer {
clear:both;
text-align:center;
}