WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

3カラムレイアウト

3カラムレイアウトを作る場合も基本的には2カラムレイアウトと考え方は一緒です。
まずは大きいカラムと小さいカラムを左右にフロートさせ、大きなカラムの中にさらに2つの箱を左右にフロートさせていく、という考え方です。

f:id:yachin29:20161008210041p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>3カラムレイアウト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">#header</div>
<div id="wrapper">
<div id="content">
<div id="main">#main</div>
<div id="sub">#sub</div>
</div>
<div id="third">#third</div>
</div>
<div id="footer">#footer</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body {
  margin:0;
  padding:0;
}

/*レイアウト部分*/
#container {
  width:800px;
  margin:0 auto;
}
#header {
  width:800px;
  height:300px;
  background:#069;
}
#wrapper {
  overflow:hidden;
}
#content {
  width:600px;
  float:left;
  overflow:hidden;
}
#main {
  width:400px;
  height:400px;
  float:right;
  background:#C66;
}
#sub {
  width:200px;
  height:400px;
  float:left;
  background:#999;
}
#third {
  width:200px;
  height:400px;
  float:right;
  background:#99FF99;
}
#footer {
  width:800px;
  height:50px;
  background: #F93;
}