※ ChatGPTを利用し、要約された質問です（原文：大divの中に小divを配置して回り込ませる方法。）
大divの中に小divを配置して回り込ませる方法
このQ&Aのポイント
大divの中に小divを配置する方法と回り込みを実現する方法についてご教授願いたいです。
また、liタグの・を消す方法についても教えていただきたいです。
具体的なコードとともに問題点を教えていただけると助かります。
大divの中に小divを配置して回り込ませる方法。
大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。
• xxxx
• xxxxx
• xxxxx
xxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxx
更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。
記述のどこに問題がありますか？
ご教授お願い致します。
(css)
div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px
#660000;}
div#container {margin-left : auto ; margin-right : auto
;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;}
h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;}
h2 {font-size:18px;padding-left:20px;padding-
top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;}
div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto
;width:800px;height:1500px;background-color:#ffffff;]
ul {border:1px solid #660000;}
li {list-style-type:none;}
h3 {font-color:#ffffff;}
p {font-color:#ffffff;}
div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;}
div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;}
div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;}
(html)
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html;charset=Shift_JIS"/>
<title>xxxxxxx</title>
<link href="./style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="image">
<h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1>
</div>
<div id="container">
<h2>xxxxxxxxxxx </h2>
</div>
<br>
<div id="clear">
<div id="menu">
<ul>
<li> xxxxxx </li>
<li> xxxxxx </li>
<li> xxxxxx </li>
</ul>
</div>
<div id="contents">
<h3>xxxxxxxxxx</h3>
<p>xxxxxxxxxxx</p>
<p>xxxxxxxxxxx</p>
<br>
<p>xxxxxxxxxxxxxxxxxx</p>
</div>
<div id="footer">
<p>xxxxxxxx</p>
</div>
</div>
</body>
</html>
お礼
ご回答ありがとうございます。 おかげさまで無事に表示する事ができました^^ 閉じカッコが『 ] 』になっていた事に全く気付かず、昨日から本やネットと確認していました^^; 教えて頂いたfirebugのIE版のような物があったので、早速使ってみましたが、視覚的かつ体系的に構造を確認できて、とても便利ですね！ 今までは上手くいかない度にひたすらソースを眺めて調べていたので、こうしたツールを教えて頂き、とても助かりました。 お忙しい中、お時間を割いて頂きまして、本当にありがとうございました。