Lecture/InfoDesignB2004/11th/review のバックアップ(No.2)

前回までの復習

現在、記事へのコメントのページで、次のようなスタイルを使って、「目次を左」「コメントを右」に配置している人が多いと思います。

pre> div.left {
 float: left;
} div.right {
 float: right;
}

/pre>

そのページを、ノート型パソコンにインストールしている、「Mozilla Firefox」というブラウザで見てください。きちんと左右に表示されていますか？

では、どのようにすれば、 Firefoxでもこちらの意図したとおりに表示できるでしょうか？

それには、次のようにします。

pre> div.left {
 float: left;
width: 22%; } div.right {
 float: right;
width: 72%; }

/pre>

このように、 floatプロパティを使う場合には、必ずwidthプロパティも設定してください。ただし、ウィンドウの幅が小さくなると、また表示が崩れてしまいますので、注意してください。