フレームを使わず、スタイルシートを使用して、視覚的にフレームを使用した

質問

フレームを使わず、スタイルシートを使用して、視覚的にフレームを使用したメニューを作ろうということで、ホームページを作成しました。
divにてコンテンツブロックを分け、スタイルシートで、そのブロックの並びを制御してやろう、とまあ、こういういきさつです。

制作したのが、こちらのページ。制作したHPのリンクを張るのはOKWaveのルール違反のようですが、あえて…
http://www.poetican.com/poetica/
このHPに使用しているすべてのページが、同じデザインで制作されています。
IEでは、理想通りにページが展開されるのですが、FireFoxやGoogleClomeでは、そのようには表示されません。
CSSファイルは、次のアドレスです。
http://www.poetican.com/poetica/poetica_main.css
おそらく、『float: left;』というのがまずいようですが…
W3Cに準拠し、なおかつ、どのブラウザでもIEと同じように表示させるためには、どのようにすればいいのでしょうか。
可能であれば、CSSだけを修正すればいいような感じでできればありがたいのですが…。
アドバイスを、よろしくお願いします。

回答No.1

noname#119957

右側のcontentsは幅が、100%に表示されていますので、ＣＳＳに幅指定で70%とか、600pxなどの幅指定をすればいいと思います。

普通は、ピクセル指定がおおいです。%指定にするとブラウザのwindowのサイズにより幅が変動しますので考慮する必要があります。

なお、HTMLに<p>が一つ余計に入っています。

お礼

幅が100%になっている、ということで…なるほど、数値の指定をしなければ100%と判断されてしまうようですね。
と、いうわけで、幅の数値指定をしたら、無事に表示されるようになりました。ありがとうございました。

この件とは別に、また違う疑問も出てきましたので、それはまた別件として質問を出させていただきます。