みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

レイアウト、フッターが崩れてしまいます。

横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">&copy;#</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;
}

投稿日時 - 2012-01-24 14:20:01

QNo.7263731

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

「#footer{
height:30px」
の部分。「3」が全角だからじゃないかな?

投稿日時 - 2012-01-24 14:35:04

あなたにオススメの質問