CSSの「float: left」でボックスを横に並べ、2カラム3カラムの構成にすることが増えてきた。

しかし、それぞれのカラムは内容の情報量に応じて高さが可変するため、カラムの高さが揃わないという大問題が起きてしまう。


↓このように


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム




「#container」:親ボックスのid

「#right_column」:右カラムのid

「#left_column」:左カラムのid

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  float: left;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  float: left;
}

[/codesyntax]


そこで、

親ボックスと背景を同色にするとか、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #eeaaee;
  float: left;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #eeaaee;
  float: left;
}

[/codesyntax]


高くなりそうなカラムにボーダーを付けるとか(この場合は左カラム)、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #eeaaee;
  float: left;
  border-right: 1px solid #333;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #eeaaee;
  float: left;
}

[/codesyntax]


各カラムに「min-height」を設定するとか、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



[codesyntax lang=”css” title=”CSS”]

#container {
 width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  float: left;
  min-height: 150px;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  float: left;
  min-height: 150px;
}

[/codesyntax]


各カラムは色指定せず、カラムの境界付近で塗り分けた画像を親ボックスの背景にするとか、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
  background-image: url(background.png);
}
#left_colmun {
  text-align: center;
  width: 200px;
  float: left;
}
#right_colmun {
  text-align: center;
  width: 100px;
  float: left;
}

[/codesyntax]


将来的には「display: table」「display: table-cell」を使うと良いとか(IE7以前非対応)、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム


[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
  display: table;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  display: table-cell;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  display: table-cell;
}

[/codesyntax]


親ボックスに「overflow: hidden」

各カラムに「padding-bottom: 32768px」「margin-bottom: -32768px」

で強引にとか、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
  overflow: hidden;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  float: left;
  padding-bottom: 32768px;
  margin-bottom: -32768px;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  float: left;
  padding-bottom: 32768px;
  margin-bottom: -32768px;
}

[/codesyntax]


あきらめて「table」 タグを使うか、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



様々な方法を試してきたが、

最近ハマっているjQueryで実に簡単にできてしまった。


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



[codesyntax lang=”javascript” title=”jQuery”]

$(window).load(function(){
  var height = $('#container').outerHeight();
  height = height + 'px';
  $('#right_column').css('height',height);
  $('#left_column').css('height',height);
});

[/codesyntax]

カラム内に「padding」が指定されていると、高さがうまく取得できないことがあるようだ。その場合は、「height = height + ‘ 足りないピクセル数 ‘ + ‘px’;」で良いかも。

TOPページへ前のページへ戻る