レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。
＊html
<body>
<div id="wrapper">
<div id="headir">
<h1>The highest hiphop design All group</h1>
<div class="logo"><img src="＃”></div>
</div>
<span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span>
<h2><img src="＃" alt="＃" /></h2>
<span id="sidemenu">
<ul>
<li><a href="#">TOP</a></li>
<br />
<li><a href="#">NEW</a></li>
<br />
<li><a href="#">Line</a></li>
<br />
<li><a href="#">Fine</a></li>
<br />
<li><a href="#">Mail</a></li>
<br />
<li><a href="#">TOP02</a></li>
<br />
<li><a href="#">NEW02</a></li>
<br />
<li><a href="#">Line02</a></li>
<br />
<li><a href="#">Fine02</a></li>
<br />
<li><a href="#">Mail02</a></li>
</ul>
</span>
<div id="main">
～～
～～
</div>
<div id="footer">
<span align="center">©＃</span>
</div>
</div>
</body>
</html>
＊css
body {
font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
margin:0px;
padding:0px;
}
#wrapper {
margin: auto;
padding:auto;
height: 100%;
width: 800px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-left-color: #000000;
border-bottom-style: solid;
border-bottom-color: #000000;
}
#headir {
padding: 0px;
margin:0px;
height: 220px;
width: 800px;
}
#headir h1{
margin: 0px;
padding: 0px;
height:20px;
font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-size:small;
text-align: left;
}
.logo{
padding-bottom:20px;}
#menu ul {
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
width:800px;
height:100px;
list-style-type : none;
}
#menu li{
display:inline;
padding-bottom:20px;
}
span#sidemenu {
height: 300px;
width: 50px;
float:left;
margin-top: -19px;
margin-right: 8px;
margin-bottom: 0px;
margin-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
font-size: smaller;
}
span#sidemenu li{
list-style-type:none;
text-indent: -30px;
}
span#sidemenu{
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
div#main {
margin-top: 20px;
margin-right: 40px;
margin-left:30px;
margin-bottom:20px;
font-size: small;
text-align: left;
left: 150px;
light: 50px;
height: 400px;
width: 600px;
}
div#main p {
padding-left:10px;
padding-light:20px;
padding-top:10px;
padding-bottom:20px;
}
#footer{
height:３0px;
width:100%;
background-color: #CC9933;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border: 1;
border-left-width: 1px;
border-left: 1;
z-index: 2;
position: relative;
margin: 0;
padding: 20px 0 0 20px;
}
お礼
回答ありがとうございます。 呼び出される側に、これを加えたらいっぱいいっぱいまで表示できるようになりました。 ありがとうございます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "httＰ://www.w3.org/TR/html4/strict.dtd">