※ ChatGPTを利用し、要約された質問です（原文：ブロック表示すると重なってしまいます！！）
ブロック表示で重なってしまう！CSSとHTMLでWEBサイトを作成したが上手くいかない
下記のｃｓｓとHTMLでWEBサイトを昔作りました
上部に■いねずみ色のブロックを並べて表示しその下に左に
縦にリスト形式でメニューが並び右にピンクのブロックで項目を並べる
形式にしたのですが、右のブロックの項目の下にテキストで文章を入れたり
何かブロックを足そうとするとブロックが重なってしまい、
上手くできませんでした。
どのようにすればうまく行きますか？教えて下さいよろしくお願いします。
/* mycss.css */
html {
background-color: aqua;
height: 100%;
}
body{
height: 100%;
font-family: Verdana, Arial;
font-size: 14px;
}
body > #container{
height: auto;
}
#container {
min-height: 100%;
height: 100%;
width: 90%;
margin: 0 auto;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
#header {
width: 100%;
height: 80px;
background: skyblue;
border-radius: 20px;
}
#menu{
margin-bottom: 15px;
overflow: hidden;
}
#main{
overflow: hidden;
margin-bottom: 15px;
}
#contents{
float: left;
width: 25%;
font-size: 14px;
}
#contents ul {
margin-bottom: 15px;
padding: 10px;
}
#contents dl{
border-bottom: 10px;
border-top: 2px solid #ccc;
}
#contents dd{
border-top: 2px solid #ccc;
}
#contents ul>li>a{
text-decoration: none;
}
#contents ul>li:hover {
background: orange;
}
#sidebar {
float: right;
width: 70%;
}
#sidebar ul>li {
float: left;
width: 230px;
height: 25px;
font-size: 13px;
text-align: center;
padding: 4px;
background: #ffd8ff;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#sidebar ul>li:hover {
background: #ddd;
}
#sidebar ul>li>a{
text-decoration: none;
display: block;
}
#footer{
font-size: 12px;
color: #ccc;
text-align: center;
border-top: 1px solid #ccc;
padding: 10px 0 20px;
}
#menu ul>li {
float: left;
width: 120px;
height: 25px;
font-size: 13px;
text-align: center;
padding: 2px;
background: #ccc;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 4px;
text-shadow: 0 1px 0 #fff;
}
#menu ul>li:hover {
background: #ddd;
}
#menu ul>li>a{
text-decoration: none;
display: block;
}
----------以下HTML-------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta chraset="shift-jis">
<title>ああああ</title>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>テストページ<A></h1>
</div>
<div id="menu">
<h2>便利リンク</h2>
<ul>
<li><a href="">Google</a></li>
<li><a href="">Youtube</a></li>
<li><a href="">【amazon】</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<dl>
<dt>検索エンジン・リアルタイム</dt>
<dd>
<ul>
<li><a href="">CEEK.JP</a></li>
<li><a href="">Google</a></li>
<li><a href="">buzztter</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>SNS/検索エンジン/メール/質問サイト</dt>
<dd>
<ul>
<li><a href="">Facebook</a></li>
<li><a href=""">Excite</a></li>
<li><a href="">Baidu</a></li>
</ul>
</dd>
</dl>
</div><!-- #contents -->
<div id="sidebar">
<ul>
<li><a href=""_blank">BOOK・OFF Online</a></li>
<li><a href="" target="_blank">イーブックオフ</a></li>
<li><a href="">infoseekニュース</a></li>
</ul>
</div><!-- #sidebar -->
</div><!-- #main -->
<div id="footer">Copyright 2018</div>
</div><!-- #container -->
</body></html>
お礼
ありがとうございました。 出来ました。