[ CSS ] 3カラムレイアウト固定幅と可変幅のサンプル

CSS Layout

c-col

  • OK – Mac Firefox 1.5
  • OK – Mac Safari 2.0.3
  • OK – Mac Opera 8.01
  • OK – Win Firefox 1.5
  • OK – Win Internet Explorer 6.0
  • OK – Win Netscape 7.2
l-col
r-col

実際の動作サンプル

3カラム固定幅のレイアウト

3カラム可変幅のレイアウト ———————————————————————-

それから、3カラム可変幅のレイアウトもやってみたのだけれど、サイドバーの背景色を一番下まで伸ばすのはどうやるんだろう? 固定幅なら、BODY に背景画像を指定するんだが。

サンプルコード

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>CSS Layout</title>
<style type="text/css">
<!--
body {
    padding:0;
    margin:0;
    }
#frame {
    width:100%;
    }
#header {
  color: #CCCCCC;
  background-color: #000000;
  border-bottom: 1px solid #999999;
    }
#wrap {
    float:left;
    width:70%;
    }
#c-col {
    float:right;
    width: 70%;
  color: #CCCCCC;
  font-size: 12px;
  background-color: #444444;
    }
#l-col {
    float:left;
    width:30%;
  background-color: #222222;
    }
#r-col {
    float:left;
    width: 30%;
  background-color: #222222;
    }
#footer {
    clear:left;
  color: #CCCCCC;
  background-color: #000000;
  border-top: 1px solid #999999;
    }
#c-col-inn { margin: 15px; }
#l-col-inn { margin: 15px; }
#r-col-inn { margin: 15px; }
-->
</style>
</head>
<body>
<div id="frame">
<div id="header">header</div>
<div id="wrap">
  <div id="c-col"><div id="c-col-inn">
    <p>c-col</p>
    <ul>
      <li>OK – Mac Firefox 1.5</li>
      <li>OK – Mac Safari 2.0.3</li>
      <li>OK – Mac Opera 8.01</li>
      <li>OK – Win Firefox 1.5</li>
      <li>OK – Win Internet Explorer 6.0</li>
      <li>OK – Win Netscape 7.2</li>
    </ul>
  </div></div><!-- /c-col -->
  <div id="l-col"><div id="l-col-inn">
    <ul>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
    </ul>
    </div></div>
</div>
<div id="r-col"><div id="r-col-inn">r-col</div></div>
<br style="clear:both;">
<div id="footer">footer</div>
</div>
</body>

実際の動作サンプル

3カラム可変幅のレイアウト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です