widget-content の幅

IE6 のバグ問題で、ブログパーツのレイアウトが崩れてしまって、色々検討してみた。

前回 div タグの入れ子 で、何故入れ子にすると IE6 でレイアウトが狂うのか、と思い、IE6 では float 問題が有り、レイアウトが崩れるという現象から、どうもこの辺が怪しいと思った。

ググってみると、
floatプロパティ・positionプロパティで問題が有る。
float プロパティを left にした場合、指定した要素を左に寄せます、後に続く内容はその右側に回り込みます。
とか書いて有る。


Movable Type の管理画面から
デザイン → テンプレート → スタイルシート

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(/mt/mt-static/themes-base/blog.css);
@import url(/mt/mt-static/themes/cityscape-portland/screen.css);
/* end StyleCatcher imports */

この場合 cityscape-portland を使っています、デザイン → スタイル で他のスタイルを選択した場合は、また違う名前のディレクトリ・ファイル名に成ります。

blog.css と screen.css から　

#alpha, #beta, #gamma {
    display: inline;
    float: left;
}

.layout-twt #gamma {
    width: 190px;
}

.widget-content {
    padding: 0 15px;
}

なので、右サイドバー（#gamma）でブログパーツを表示させたい場合、widget-content の padding の値が左右でそれぞれで 15px なので、その二倍の 30px に成る。

右サイドバーでのブログパーツの幅は、190px-30px → 160px と成り、実質 160px 以内で無いとレイアウトに障害が発生する
、と考えた。

検証してみると、

.widget-content {
    padding: 0 0px;
}

として

<mt:If name="main_index">
        <div class="widget-content">
           <div>
    　　<img src="<MTBlogURL$>daycount/daycount.cgi?gif">
           </div>

<div class="imagenavi">    
<script language="javascript" src="http://imagenavi.jp/lab/blogparts/bp.js"></script>
<script language="javascript">inBlogparts("1","1","7");</script>    
</div>

         </div>
</mt:If>


imagenavi を <div class="widget-content"> タグの入れ子にしても、レイアウトは崩れない。

.widget-content {
    padding: 0 15px;
}

では、レイアウトが崩れてしまう。
imagenavi では、たまたまコンテンツの幅が 160px を超えている様で、今回の現象に成ってしまったと思う。