CSS によるレイアウトで躓いたことを書かれていて、その中で下記の部分に注目してみた。
コンテンツの中に画像が入ったサンプル２をIEで見て下さい。ウインドを縮小していって画像の幅が入りきらなくなると・・・画像がメニューBOXの下の高さまで落ちてしまいます。
上記サイトでは float を使った 2 段組の可変レイアウトでの解決方法がまだ見つかっていないような感じだったので、ちょっとサンプルを作って解決方法を提示してみる。
サンプルを用意する
メインコンテンツ部分が可変幅で、ナビゲーションが固定幅のレイアウトをサンプルとして用意した。構造としては下図のような感じで、ネガティブマージンを利用して左のメインコンテンツが可変幅、右のナビゲーションが固定幅を実現している。ちなみにやっつけで作ったんで、かなり粗があったりするっつうか、かなりテキトー。
メインコンテンツに画像がある際の IE の挙動
Windows IE の場合は、メインコンテンツに画像を置いた際に、画像幅以下までウィンドウを縮めていくと ナビゲーションが画像に重ならずにメインコンテンツの下にストンと落ちてしまう現象が起こる。下記のサンプルを試しに IE で見てもらえば分かると思う。
「CSSの謎」では解決方法として固定幅にする方法が説明されているけど、可変幅のままでも簡単にナビゲーションを下に落とさない方法が実はあったりする。
可変幅のままでナビゲーションを落とさない方法
実際に解決したサンプルを用意してみた。
実はこれ、float: right; したナビゲーションの指定に clear: right; を追加しただけ。
#nav {
float: right;
clear: right;
width: 200px;
}しかも、これは clear: both; でも clear: left; でも良くて、要は clear させれば良いだけど言う何とも簡単な方法なんでげす。んでもって、何でこれで下に落ちないようになるのかは分かりません :-P 厳密に言うと、解決とは言い切れないのかも知れないけど、少なくともナビゲーションが下に落ちてしまうブッサイクな挙動よりはマシな形になるんで良いのではないでしょうか。とか言って強引にまとめてみた！
Comments