posted at Dec/17/2005 20:01 [ 技術/スタイルシート ]
このサイトは、ごらんの通り三段組を用いています。
こいつを作るのに、何カ所かのサイトさんを参考に、Internet ExplorerとFirefox両ブラウザでいちいち確認しながらちまちま構築して大変でした(TT)
ので、備忘録の意味でこのエントリ。多分長くなるので何回かに分けます。
(参考サイト:スタイルシートによる崩れない段組 via YEAR OF THE CAT様)

基本構造を理解する
基本的な構造として、段組をする場合には横の段で一度まとめてくくってやらないといけません。たとえば図1-1のようにしたいときには図1-2のようにしてやります。

図1-1

図1-2
つまりこういうことになります!(by八嶋君)
<div id="head">上部</div>
<div id="body">
    <div id="left">左ナビ</div>
    <div id="right">右ナビ</div>
    <div id="center">中央</div>
</div>
<div id="foot">下部</div>
これが基本形です。
(なお、3段組の部分ですが、ここは先に左と右を設定して、中央部は余った部分でできているというイメージでいてください。)
また、この外側に更に<div>を付けます。
<div id="outline">
    <div id="head">上部</div>
    <div id="body">
        <div id="left">左ナビ</div>
        <div id="right">右ナビ</div>
        <div id="center">中央</div>
    </div>
    <div id="foot">下部</div>
</div>
このoutlineは、中央揃えとか、コンテンツ全体の横幅の設定などに使います。
スタイルシートを設定する
body{
    text-align:center;  /*位置を画面中央に配置する場合 */
}

#outline{
    padding:0px auto;   /*位置を画面中央に配置する場合 */
    width:800px;
    text-align:left;
}

#head{
}

#left{
    float:left;
    width:150px;
}

#right{
    float:left;
    width:150px;
}

#center{
    margin:0px 150px;
}

#foot{
    clear:both;
}

※注意
IEとFfでは、borderを設定したときの読み方が違います。
例えば1pxのborderを両サイドに設定してwidth200pxだった場合、
  • IEの場合合計200px、内部の余白が198px
  • Ffの場合合計202px、内部の余白が200px
要するにborderを内部として読み込むか外部として読み込むかの違いがあります。
ピクセル指定でどうしてもうまくいかない、と言う場合は、borderを外してみたり、上記のことに留意して設定し直してください。
borderを使わないデザインなら、background-colorを適当に替えて表示させてみるのがいいと思います。
リンクシェア アフィリエイト紹介プログラム