レイアウト、フッターが崩れてしまいます。
横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またsafari、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: "MS P明朝", "細明朝体", "ヒラギノ明朝 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: "MS P明朝", "細明朝体", "ヒラギノ明朝 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:30px;
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;
}
補足
文字の部分は一部塗りつぶしましたが画像をアップしました(画像はドコモブラウザを撮影したものになります)。 青地の背景に白のボックスが表示されているのが分かるかと思います。 見にくいですがボックス枠を黒線で縁取られていて、ボックス内には仕切りのようなラインも表示されています。 このボックスが画像である可能性はありません。 ご回答宜しくお願い致します。