[B! カラム][CSS] simsonsのブックマーク

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。下記は、そのイメージです。

simsons 2008/10/30

リンク

クリーンな水平分割が出来そうな2カラムサンプル

2カラムなサンプルです。海外で流行気味？ということで、「クリーンな水平分割」が出来そうなサンプルです。どんなもんか見たい方・欲しい方は以下よりどうぞ。サンプル一式ダウンロードこの辺で知りました↓ POLAR BEAR BLOG: 「クリーンな水平分割」がウェブデザインの最新流行？言われてみれば確かに多いような気がしないでもないですね。こういうのは。 MT4の管理画面もそんな感じだし。とはいえ、日本の企業サイトではあんまり見た記憶がないような、チェックが甘いだけなような。一応サンプルの説明でも。ベースとしてはそれなりに使いやすいかと思います。新規でサイトを作るのに使えそうなの一式。をベースにして、各コンテナの子要素にdiv.areaを追加している感じです。 .areaの指定がこんな感じになってて、 #page .area { width: 860px; margin: 0

simsons 2007/11/18

リンク

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。詳しくは、最小限にしたサンプルを作成したので参照ください。高さの異なるカラムを揃えるスタイルシートのサンプル下記の「32768px」って、何か特別な意味があるのでしょうか。

simsons 2007/10/25

リンク