Days on the Moon

さて、このブログ、スタイルが選択できるとのことで用意されたスタイルを見ていたのですが、いくつかレイアウトが崩れるものがあります。具体的には、本文とツールバーが横に並ぶような設定になっているにもかかわらず、両者が縦に並んで表示されてしまいます。

ツールバーを本文の右側に置く設定ならば本文のあとにツールバーが表示されるのでまだいいのですが、左側に置く設定になっていると本文がツールバーの下にもぐってしまうため、本来本文のあるべき場所に空白が表示され、スクロールしないと本文が読めなくなってしまいます。

私の使っているFirefox 1.0.3 (1.0.4にアップデートしないとな……)ではビジネス、クール、標準、シーズンの各スタイルでこの現象が起こるのですが、調べてみたところこれらのスタイルでは本文とツールバーを囲むボックス(body要素またはidがcontainerであるdiv要素)の幅が指定されていないのが原因のようです。

このブログのスタイルではブラウザウィンドウの横幅が760px以上であることを前提としているようですが、それが明示されていないのでその幅以下の環境ではレイアウトが崩れてしまったのでしょう。ためしにブラウザウィンドウを最大化してやるときれいに横に並びました。とりあえずの解決策としてはスタイルシートで以下のように幅を指定してやることでしょうか。

#container { width: 760px; }

なお、クールについては以下のように一見幅が指定してあるように見えますが……よく見ると直前の行でセミコロンが抜けていますね。

#container {
	margin: 0;
	padding: 0;
	background-color: #B9B9B9;
	background-image: url(bg760.gif);
	background-repeat:repeat
	width: 760px;
}

また、Safariでレイアウトが崩れる(レイアウト: akiblo asablo)という話があるようですが、これもおそらくは上記と同じ原因ではないでしょうか。