※ ChatGPTを利用し、要約された質問です（原文：CSSレイアウトでフッターをうまく配置出来ません。）
CSSレイアウトでフッターをうまく配置出来ません
このQ&Aのポイント
CSSレイアウトでフッターの配置に問題があります。テキストが増えるとフッターが文章部分と重なってしまいます。解決策としてfloatを使用する方法を考えていますが、確認が必要です。
CSSレイアウトでフッターの位置調整に困っています。文章が増えるとフッターが重なります。floatを使用して自動的にフッターの位置をずらす方法を試していますが、実行可能か確認したいです。
CSSレイアウトでフッターの配置に問題があります。文章が増えるとフッターと重なってしまいます。現在floatを使用して解決しようと考えていますが、確認をお願いします。
CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。
以下サンプルのソースです。
<body>
<div id="layout">
<div id="header">
<h1><img src="img/co.gif"></h1>
</div>
<div id="mainarea">
<div id="navi">
<h2><img src="img/button.gif"></h2>
<ul>
<li class="naviatem">メニュー</li>
</ul>
</div>
<div id="main"><img src="img/contact.jpg"></div>
<div id="scontents">
<form>
<table width="90%" cellpadding="0" cellspacing="2" border="0">
<tr>
<td class="contact">内容</td>
<td class="contact1"><textarea cols="50" rows="10"></textarea></td>
</tr>
</table>
</form>
</div>
</div>
<div id="footer">
<p>フッター部分</p>
</div>
</div>
</body>
-------CSS-------------
#layout{
width: 750px;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#header{
width: 750px;
height: 63px;
margin: 0px;
}
#mainarea{
margin-top: 16px;
width: 750px;
height: 100%;
}
#navi{
width: 183px;
margin-left: 3px;
}
#main{
position:absolute;
width: 561px;
margin-left: 189px;
top: 81px;
}
#footer {
margin: 30em 0 0 0;
width: 750px;
border-top: 1px solid #666666;
position : relative; z-index: 1;
}
#scontents{
position:absolute;
margin-left: 192px;
top: 250px;
width: 553px;
}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
