ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

いまさら聞けないサイト製作コミュのCSSでレイアウトが崩れてしまいます

  • mixiチェック
  • このエントリーをはてなブックマークに追加
サイドバーとメインコンテンツを横に並べて配置する
レイアウトなのですが
4つめのIMGタグを入れた瞬間にメインコンテンツのブロックが
左に追いやられてしまいました。
どうしたら解決できるのでしょうか?
url http://deaiweb.xoop.jp/sample/

ソースはこれです
<style type="text/css">
<!--
#menu{
margin-left:0px;
padding-left:0px;
list-style-type:none;
border-top:1px solid #666666;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
width:750px;
float:left;
}
#menu li{
float:left;
width:150px;
}
#menu a {
display:block;
padding-top:10px;
padding-bottom:10px;
background-image: url(../adult/img/img-navi.gif);
background-repeat:no-repeat;
background-position:left top;
border-left:1px solid #666666;
color:#ffffff;
font-family:Geneva, Arial, Helvetica, sans-serif;
text-decoration:none;
text-align:center;
height:1%;
}
#menu a:hover{
background-image: url(../adult/img/img-navi.gif);
background-repeat:no-repeat;
background-position: 0 -4px;
}
#footernavi{
margin-left:0px;
paddin-left:0px;
list-style-type:none;
text-align:center;
}
#footernavi li{
display:inline;
padding-right:1em;
padding-left:1em;
}
#contentbody{
width:750px;
}
#localnavi{
width:180px;
float:left;
border:1px solid #000000;
padding:5px;
padding-bottom:34px;
margin-top:10px;
}
#contents{
width:550px;
float:left;
border:1px solid #000000;
color:#FF66CC;
margin-top:10px;
margin-left:5px;
}
.contentscoment{
padding:5px;
}
.dxgirl{
text-align:left;

}
.dxgirl img{padding:5px;
float:left;
width:110px;
height:110px;
border:0px;
}
.onlinebanner{boreder:1px solid #000000;
padding:5px;
}
.dxcoment{
padding:5px;
}

#footernavi{
clear:left;
width:750px;
}


.clear{clear:left;
}
-->
</style>

<body>
<ul id="menu">
<li><a href="#">aaaaaa</a></li>
<li><a href="../adult/douga.html">bbbbb</a></li>
<li><a href="#">ddddddd</a></li>
<li><a href="#">sssssss</a></li>
<li><a href="#">wwwwwwww</a></li>
</ul><!--menu-ここまで-->
<div id="contentbody">
<div id="localnavi">
<img src="tbn_901.jpg" width="120" height="360"></div>
<!--localnavi--ここまで-->
<div id="contents">
<div class="contentscoment">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div class="dxgirl">

<a href="http://click.dtiserv2.com/Direct/602-6-35928/moviepages/100805-979/100805-979_c.html" target="_blank"><img src="../topaaa_r1_c2.gif" alt="" width="324" height="84"></a>
<dl>
<dt>xxxxxx</dt>
<dd>
qq
</dd>
</dl>
</div>
<br class="clear"/>
<div class="dxgirl">
<a href="http://click.dtiserv2.com/Direct/602-6-35928/moviepages/100403-457/100403-457_c.html" target="_blank"><img src="../aaa_r1_c1.gif" alt="" width="72" height="92"></a>
<dl>
<dt>xxxxx</dt>
<dd>
qqq
</dd>
</dl>
</div>
<div class="clear"/>
<div class="dxgirl">
<a href="http://click.dtiserv2.com/Direct/602-6-35928/moviepages/031105-808/031105-808_c.html"><img src="../aaa_r1_c1.gif" width="72" height="92"></a>
<dl>
<dt>xxxxx</dt>
<dd>
qqqq
</dd>
</dl>
</div>
<div class="clear"/>
<div class="dxgirl">
<a href="http://click.dtiserv2.com/Direct/602-6-35928/moviepages/110902-282/110902-282_c.html"><img src="../aaa_r1_c1.gif" width="72" height="92"></a>
<dl>
<dt>xxxxx</dt>
<dd>aaa</dd>
</dl>
</div>
<div class="clear"/>

<!--dxgirlここまで-->

</div><!--contentsここまで-->
</div><!--contentbodyここまで-->

<ul id="footernavi">
<li>©xxx</li>
</ul>
<!--footernavi-ここまで-->
</body>

コメント(3)

何が原因かわかりませんがはじめから作り直したら
なんとかなりました。
もしかしたら
左の回りこみの解除のhtmlタグを
<br class="clear"/>
ではなくて
<div class="clear"/> 
にしていたからかもしれません。
おさがわせしました。
<div>は閉じタグとセットで使わないといけないので
<div class="clear"/>
という使い方はあり得ません。

またhtmlがXhtmlでなければ
<br class="clear"/>
の最後の"/"は必要ありません。
<br class="clear">

htmlのタグリファレンス本を1冊手元において勉強されることをオススメします。
回答有難うございます
ブログの書き方のHPで
<br class="clear"/>
とあったのでhtmlでもいいのかと思って使っていました。
勉強になりました。

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

いまさら聞けないサイト製作 更新情報

いまさら聞けないサイト製作のメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。