Help us understand the problem. What is going on with this article?

HTML5/CSS3 2カラム 良く使うbase.html。

別に深い考察はありません。良く使いそうな2カラムのHTML5ソースコードですので、個人的にファイリングしてみました。忙しいときに楽したいですから…。
☆Webクリエイター能力認定試験HTML対応エキスパート公式テキスト 参照☆

base-2column.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/2column.css">
</head>
<body>
<header id="top">
<h1><a href="index.html"><img src="" alt=""></a></h1>   
</header>
    <nav>
        <ul>
        <li id="nav_concept"><a href="concept.html">1</a></li>
        <li id="nav_plan"><a href="plan.html">2</a></li>
        <li id="nav_fair"><a href="fair.html">3</a></li>
        <li id="nav_contact"><a href="contact.html">4</a></li>
        </ul>
    </nav>
    <div id="breadcrumb">
        <ul>
            <li><a href="index.html">ホーム</a></li>
            <li>5</li>
        </ul>
    </div>
    <div id="contents">
        <div id="main">
            <article>
                <h1>2カラムの作り方</h1>
            </article>
        </div>
        <div id="sub">
            <aside>
                <div class="bnr_inner">
                    <a href="plan.html">
                    <dl>
                        <dt><img src="images/bnr_plan.jpg" alt="プランのご案内"></dt>
                        <dd>標準のプランをご紹介いたします。</dd>
                    </dl>
                    </a>
                </div>
                <div class="bnr_inner">
                    <a href="contact.html">
                    <p><img src="images/bnr_plan.png" alt="お問い合せ"></p>
                    </a>
                </div>
            </aside>
        </div>
    </div>
    <footer>
        <p id="pagetop"><a href="#top">ページ先頭へ戻る</a></p>
        <address>北海道 電話 営業時間</address>
        <p id="copyright"><small>Copyright &copy;2019 2カラムの作り方 All rights reserved</small></p>
    </footer>
</body>
</html>
2column.css
@charset "utf-8";

/* 基本レイアウト ここから↓*/
body {
    background-color: #f3f2e9;
    color: #5f5039;
}
header, nav, #breadcrumb, #contents, footer {
    margin: 0 auto 0 auto;
    width: 840px;
}
header h1 {
    margin: 0 0 26px 0;
    padding-top: 28px;
    text-align: center;
}
nav ul {
    overflow: hidden;
    margin: 0 0 20px 0;
    padding-left: 0;
    list-style-type: none;
}
nav ul li {
    float: left;
    width: 210px;
}
nav ul li a {
    overflow: hidden;
    display: block;
    padding-top: 44px;
    height: 0;
}
nav ul li#nav_concept a {
    background-image: url(../images/nav-sanyuukaku-1-1.png);
}
nav ul li#nav_plan a {
    background-image: url(../images/nav-sanyuukaku-1-2.png);
}
nav ul li#nav_fair a {
    background-image: url(../images/nav-sanyuukaku-1-3.png);
}
nav ul li#nav_contact a {
    background-image: url(../images/nav-sanyuukaku-1-4.png);
}
#contents {
    overflow: hidden;
}
#main {
    float: left;
    width: 570px;
}
#sub {
    float: right;
    width: 230px;
}
footer {
    padding-top: 70px;
}
#main h1 {
    margin: 0 0 30px 0;
    padding: 35px 0 35px 65px;
    font-size: 156.25%;
    background-image: url(../images/bg_h1_head.png), url(../images/bg_h1_bottom.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left bottom;
}
#concept #nav_concept a,
#plan #nav_plan a,
#fair #nav_fair a,
#contact #nav_contact a,
nav ul li a:hover {
    background-position: 0 -45px;
}
.bnr_inner a p img:hover {
    opacity: 0.8;
}

/* 基本レイアウト ここまで↑*/
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away