CSSで、初歩的なことだけれど重要だと思われるもの

CSS

あちこちのサンプルやサイトを調べて、なんとなくわかってきた程度の事を偉そうに書いてみる。
といってもIE6でしか確認してないけれど。

bodyをclassに見立てて、classのmainを左、classのsideを右の配置で説明してみる。

<style type="text/css">
.body {
    width: 80%;
    height: 300px;
    background: #002050;
    padding: 5;
}
.main {
    background: #ffffff;
    width: 70%;
    height: 100%;
    float: left;
    padding: 5;
    word-wrap: break-word;
}
.side {
    background: #ffffff;
    width: 200px;
    height: 100%;
    float: right;
    clear: right;
}
</style>

----------------------↓bodyの部分-----------------------------------
<div class=body>
    <div class=main>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div class=side>
    </div>
</div>


[重要と思われること]
classのmain

mainのword-wrap:break-word;
これがないと指定した幅で、自動的に改行にならず文字の数だけ幅が広がってしまう。

widthを%指定にすることにより、ウィンドウのサイズによって幅が変わる。


classのside

sideのclear:right;
leftかrightを指定すると、ウィンドウの幅を縮めてもsideが下に潜り込まなくなり
また、%指定ではないので幅が固定する感じ。



[もっと重要と思われること]
これらの記述、方法が正しいのか正しくないのか
は書いている本人はさほど気にしてない様子。