かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS floatしてるコンテンツの幅が無くなる時は

久しぶりにCSSを書いていて色々と忘れてしまっていてfloatでハマることになるとは...

bootstrapBootstrap
などのフレームワークを使ってレイアウトを組む事も多いと思います。
例えば下の様なページ遷移するパーツをこんな感じでマークアップしたとします。

<!-- html -->
<div class="row">
  <div class="span4">
    <a href="prev">&lt; PREV</a>
  </div>
  <div class="span4">
    <a href="index">INDEX</a>
  </div>
  <div class="span4">
    <a href="next">NEXT &gt;</a>
  </div>
</div>

/* CSS */
.row {
  margin: 0 -1%;
}
.row span4 {
  float: left;
  padding: 0 1%;
  width: 31%;
}

こんな感じで表示されます。↓


で、wordpressなどで動的に吐き出すとPREVが無かったり、NEXTがなかったりする事があります。
PREVが無い時HTMLはこの様な感じで出力されます

<!-- html -->
<div class="row">
  <div class="span4">
  </div>
  <div class="span4">
    <a href="index">INDEX</a>
  </div>
  <div class="span4">
    <a href="next">NEXT &gt;</a>
  </div>
</div>

.span4が3つあるにも関わらず
中身の無い先頭の.span4の幅が無視されてしまっています。
これはfloatしている要素に高さが指定されていないと幅が無視されてしまう様です。
なので、CSSで要素の高さを指定しておきます。

/* CSS */
.row {
  margin: 0 -1%;
}
.row span4 {
  float: left;
  padding: 0 1%;
  width: 31%;
  min-height: 1em;  /* min-heightを追加 */
}

はい。ちゃんと3カラムの表示になりました。内容が動的なケースも多いかと思いますのでmin-heightで指定しておけばOKです。

min-heightIE効かないじゃん?ですって???
はい。IE!? 知らない子ですね!

最近はIE対応しないスタンスです。
お仕事の時はIE対応は別途バージョン別に追加料金でって形にしています。
このプランにすると、モダンじゃないIE対応はいいや。って事になる事も多いです。
IE撲滅運動活動のためにも良いと思います!