レイアウト、フッターが崩れてしまいます。
横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;
}
