floatを使ったカラムの高さを揃える

改造人ツクルダーaaaaee, container, eeaaee, left_colmun, right_colmun

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

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


↓このように


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム




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

「#right_column」:右カラムのid

「#left_column」:左カラムのid

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;
}


そこで、

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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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;
}


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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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;
}


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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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;
}


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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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;
}


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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム


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;
}


親ボックスに「overflow: hidden」

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

で強引にとか、


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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;
}


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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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

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


左カラム


AAAAAAAA

AAAAAAAA

AAAAAAAA



右カラム



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

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

「JavaScriptをオフにしていると効果がない」という声も聞かれるが、最近はJavaScript前提で構築することがほとんどだから気にしないことにしよう。