HTML Kickstartの12カラムシステムはAdSenseと相性が良くない

Tweet

自分の持っているサイトを 99Lime の HTML Kickstartを使って再構築しているのですが、どうも AdSense の表示がおかしくなることに気づきました。

1ページの中に複数の AdSense を設置していると表示されないものが出てしまいます。
ブラウザのリロードボタンを押せば表示されるのですが、新規ウィンドウに表示すると、また表示されなくなってしまいます。表示されたとしても、若干位置がずれてしまう事もありました。

どうも HTML Kickstart の col_1 〜 col_12 のカラムクラス内に AdSense を配置すると、このような現象がでるようです。
12カラムシステムというのは、TwitterのBootstrapでも採用されている最近はやりのレイアウト手法です。
HTML Kickstartでのカラムクラスは、CSS でこのように定義されています。(一部抜粋)

.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

.col_1,
.col_2,
.col_3,
.col_4,
.col_5,
.col_6,
.col_7,
.col_8,
.col_9,
.col_10,
.col_11,
.col_12 {
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:8px;
margin-bottom:8px;
float: left;
display: block;
}

推測ですが、カラムの幅が％で指定されていると、最終的な幅のピクセル数が決定されるのが、全要素をレンダリングしてからになるので、このせいで AdSense の javascript がうまく働かないか、一度レンダリングされても、直ぐにクリアされてしまうのではないでしょうか。

そこで、AdSense を設置するところでは、12カラムシステムを使うのをやめ、固定値で幅を指定するようにしたら、正しく表示されるようになりました。

正直、12カラムシステムを使用しないと HTML Kickstart を利用するメリットが薄れますが、HTML Kickstart には、その他にも魅力的なCSSが用意されていますので、このまま使用していこうと思います。
何よりこれらの CSS を読むことは、僕にとってかなり勉強になっています。