私はテーブルの使用から離れようとしています。現在、単純な div ベースのレイアウトを作成しようとしています。ヘッダー、コンテンツ、フッターの div は幅 100% で、親 div はありません。しかし、私はそれに少し問題があります。何かを挿入すると、コンテンツとフッターの div がヘッダーの div と重なってしまいます。これらはヘッダー div の真ん中に表示されます。空の場合、通常どおり表示されます。しかし、ヘッダー画像を挿入した瞬間に問題が発生します。
float および display プロパティを変更しようとしましたが、奇妙な出力が得られます。それらを次々に垂直に配置するのを手伝ってくれる人はいますか?
HTMLコードは次のとおりです。
<div id="topDiv"> topmenu</div>
<div id="headerDiv">
<div class="innerDiv"><img src=" photos/header.jpg" /></div>
</div><br /><br />
<div id="contentsDiv"> content</div>
<div id="footDiv"> footer </div>
CSS スタイルは次のとおりです。
div#topDiv{
width:100%;
height:20px;
background-color:#800000;
text-align:center;
margin: 0px;
position:absolute;
}
div#headerDiv{
width:100%;
position:absolute;
background-color:#0FF;
text-align:center;
margin: 0px;
}
div#contentsDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#0CC;
position:absolute;
}
div#footDiv{
width:100%;
margin: 0px;
text-align:center;
background-color:#CF3;
position:absolute;
}
.innerDiv{
width:930px;
height:100px;
margin:auto;
background-color:#C30;
position:relevant;
}