※ ChatGPTを利用し、要約された質問です（原文：FOOTERを３カラムで配置したい）
フッターを3カラムで配置する方法
このQ&Aのポイント
CSSを使用して、フッターを3カラムで配置する方法について説明します。
HTMLとCSSを使用して、フッターを3カラムで配置する方法について詳しく説明します。
フッターを3つの列に配置するために、div要素とposition:absoluteを使用する方法について解説します。
こんにちは。いつもお世話になっています。
質問は題名の通りです。footerを3カラム使い、3列で配置したいと考えています。
CSS
----
/* フッター */
div#FOOTER {
width:100%;
border-top: 1px solid #204460;
border-bottom: 4px solid #204460;
background: #507EA1 ;
}
div#FOOTERleft{
position:absolute;
left:0;
width:33%;
}
}
div#FOOTERmiddle{
position:absolute;
width:34%;
margin-left:33%;
margin-right:33%;
}
div#FOOTERright{
position:absolute;
right:0;
width:33%;
}
---
html
<div id="FOOTER">
<div id="FOOTERleft">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<div id="FOOTERmiddle">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<div id="FOOTERright">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
</div>
と書いたのですが、なぜかFOOTERleftとFOOTERmiddleの間に隙間ができ、FOOTERrightは他2つの下側に配置されます。
手元のWeb標準の教科書を参考に頑張ってみましたが、うまくできませんでした。
どなたか正常に配置することができる書き方を教えてください。
どうかよろしくお願いします。
お礼
ご回答ありがとうございます。 なるほどです。idとclassを同一視していました。（どちらも似たようなものだと思っていました。） idはページの場所や特定のものを一意に定めるためで、classはデザインを設定するというのは書く上で覚えておかなければいけないことなのですね。 ＞HTMLはデザインを考えたらダメです。あくまで文書構造を記述するためのものです。 この一文はよく覚えておきます。 もう一度、書いてくださったコードとご指摘いただいた内容を見ながらよく内容を把握しようと思います。 ご丁寧な回答、本当にありがとうございました。