CSSで２カラムのレイアウト

完成イメージ

HTMLの作成
CSSの作成

HTMLの作成

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
        <link rel="stylesheet" href="default.css" >
        <title></title>
    </head>
    <body>
        <div id="header">ヘッダー</div>
        <div id="container">
            <div id="side-bar">
                <p>サイドバー width:200</p>
            </div>
            <div id="main-contents">
                <p>メインコンテンツ 可変</p>
            </div>
        </div>
        <div id="footer">&copy;2016 tmick.net</div>
    </body>
</html>

CSSの作成

/* default.css */
@charset "UTF-8";
body {
  width: 100%;
  margin: 0 auto; /* 中央揃えのおまじない */
}
#header{
  background: rgb(147, 98, 33);
}

#container{
  background: rgb(80, 254, 227);
}

#side-bar{
  background: rgb(22, 70, 230);
  width: 200px;
  height: auto;
  float: left;
}
#main-contents{
  background: rgb(215, 218, 46);
  margin-left: 200px;
}

#footer{
  background: rgb(16, 140, 235);
}

/* clearfix */
.clearfix:before,
.clearfix:after{
  content:"";
  display: table;
}

.clearfix:after{
  clear:both;
}

/*IE6, 7対策 */
.clearfix{
  *zoom:1;
}

※ 分かりやすくする為にbackgroundで色指定しています