position:relative
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
ボックスの位置はまず通常フローにて計算され（この計算で得られた位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。 なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position )］より
前後のHTMLや文書構造、およびどのように表現したいかがわかりませんが、通常はposition:absoluteを使います。下記見本では、続く<address>の上に隙間は開いていませんね。
[例]HTML4 いずれもタブは＿に置換してあるので戻すこと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
body,html{margin:0;padding:0;}
div.header,div.section,div.footer{width:70%;margin:0 auto;}
div.header{background-color:aqua;height:100px;}
div.section{background-color:yellow;min-height:300px;}
div.footer{background-color:silver;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
div.section div.section{width:90%;background-color:lime;min-height:0;}
#AuthorProfile,div.footer div.nav{position:absolute;top:100px;width:13%;background-color:fuchsia;min-height:0;}
#AuthorProfile{left:5px;}
div.footer div.nav{right:5px;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿</div>
＿<div class="section">
＿＿<h2>本文見出し</h2>
＿＿<p>記事</p>
＿＿<div class="section">
＿＿＿<h3>項目見出し</h3>
＿＿＿<p>記事</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<div class="section" id="AuthorProfile">
＿＿＿<h3>自己紹介</h3>
＿＿＿<h3>自己紹介</h2>
＿＿＿<p>私は・・・</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="./">トップ</a></li>
＿＿＿＿<li><a href="./books">著書</a></li>
＿＿＿＿<li><a href="./Blog">ブログ</a></li>
＿＿＿</ul>
＿＿</div>
＿＿<address>連絡先</address>
＿</div>
</body>
</html>
[例}HTML5
<!doctype html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<link rel="stylesheet" href="css/style.css">
<style media="screen">
<!--
body,html{margin:0;padding:0;}
header,section,footer{width:70%;margin:0 auto;}
header{background-color:aqua;height:100px;}
section{background-color:yellow;min-height:300px;}
footer{background-color:silver;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
section section{width:90%;background-color:lime;min-height:0;}
#AuthorProfile,footer div.nav{position:absolute;top:100px;width:13%;background-color:fuchsia;min-height:0;}
#AuthorProfile{left:5px;}
div.footer div.nav{right:5px;}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1>サンプル</h1>
＿</header>
＿<section>
＿＿<h2>本文見出し</h2>
＿＿<p>記事</p>
＿＿<section>
＿＿＿<h3>項目見出し</h3>
＿＿＿<p>記事</p>
＿＿</section>
＿</section>
＿<footer>
＿＿<h2>文書情報</h2>
＿＿<section id="AuthorProfile">
＿＿＿<h3>自己紹介</h3>
＿＿＿<h3>自己紹介</h2>
＿＿＿<p>私は・・・</p>
＿＿</section>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="./">トップ</a></li>
＿＿＿＿<li><a href="./books">著書</a></li>
＿＿＿＿<li><a href="./Blog">ブログ</a></li>
＿＿＿</ul>
＿＿</nav>
＿＿<address>連絡先</address>
＿</footer>
</body>
</html>
お礼
ありがとうございます。難しいのでよく確認して再度質問させてください。