Last-modified: 2011-12-26 (月) 01:24:43
HTML・CSS/フッタのある3カラム構成で高さをそろえる方法。その1


状況

テーブルタグを使わずに、3カラム(左、中央、右)+フッタ構成で高さを整える。

確認したときの環境

概要

方法

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
-
|
!
 
-
|
!
-
|
!
 
-
|
|
|
!
-
|
!
 
-
|
|
|
!
-
|
!
 
-
|
|
|
|
!
/***********************************************************
左、中央、右カラム設定
************************************************************/
/* 全体 */
div#column_set {
    border: 1px solid #131313;            /* 大外の枠線を描画 */
}
/***********************************************************
左カラム設定
************************************************************/
/* 全体 */
div#left_column {
    float: left;                    /* 段組み */
    width: 150px;                    /* 幅固定 */
    overflow: hidden;                /* はみ出し部分の処理 */
}
/***********************************************************
右カラム設定
************************************************************/
/* 全体 */
div#right_column {
    float: right;                    /* 段組み */
    width: 150px;                    /* 幅固定 */
    overflow: hidden;                /* はみ出し部分の処理 */
}
/***********************************************************
中央カラム設定
************************************************************/
/* 全体 */
div#center_column {
    overflow: hidden;                /* はみ出し部分の処理 */
    border-left: 1px solid #131313;            /* 左カラムとの境界線 */
    border-right: 1px solid #131313;        /* 右カラムとの境界線 */
    min-height: 1200px;                /* 3カラムの幅合わせ対策 */
}