【CSS】右側エリアがずれ込む

解決済

質問者：uhnee
質問日時：2010/03/30 15:20
回答数：1件

CSS初心者で、会社のサイトの変更をしています。
現状メイン画像1枚のレイアウトだったところを
差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。
はめ込んだところ、右側のボタンがずれ込みます。

何をどうしたら解決できるかわかりません。
どうしたら修正できますでしょうか。
よろしくお願い申し上げます。

≪修正前のレイアウト≫

□□□□□□□□□　■■■■■
□□メイン画像□□　■ボタン■
□□□□□□□□□　■■■■■

【HTML】
<div id="keySpace">
<p>
<a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p>
<ul>
<li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li>
<li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li>
</ul>
</div>

【CSS外部】
#keySpace {
width: 860px;
margin: 0px auto;
padding: 0px 0px 7px;
background: #FFF;
}

#keySpace p {
width: 643px;
margin: 0px 12px 0px 0px;
float: left;
display: inline;
}

#keySpace ul {
width: 205px;
float: right;
}

#keySpace ul li {
margin: 0px 0px 3px;
}

≪修正後のレイアウト≫

□□□□□□□□□
□□メイン画像□□
□□□□□□□□□
■■■■■
■ボタン■
■■■■■

【HTML】
<div id="keySpace">
<p>
<div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div>
<div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div>
</p>
<ul>
<ul>
<li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li>
<li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li>
</ul>
</div>

【CSS】上記に追加
<style type="text/css">
.banner { display:none; }
</style>