floatを使わずに、cssレイアウトって可能でしょうか？

質問

例えば、現在見ているこのページのように、ヘッダーとフッターがあり、コンテンツが左右二つのカラムで成り立っているようなレイアウトを、floatでなくpositionで、レイアウトすることは可能でしょうか？
（その際、左右どちらのカラムの方が、高さが高くなっても、レイアウトが崩れないように。）

floatを使いたくない理由は、親ボックスからはみ出さないように、ハック（clearfix）を使わないといけないからです。

回答No.3

DrFell · ベストアンサー

スタイル部分を以下に差し替えてください。
div.wrap {width:620px;overflow:hidden;background:blue;}
div.left {width:300px;border-right:20px solid red;margin-right:-20px;float:left;}
div.right {width:300px;border-left:20px solid red;float:left;}

右側の線と左の線を重ねネガティブマージンで調整しています。
わからなければ
http://www.k5.dion.ne.jp/~i-araki/css/div-table.html
を参考に。

参考URL：

http://www.k5.dion.ne.jp/~i-araki/css/div-table.html

お礼

ご回答ありがとうございます。

素晴らしい！overflow:hidden、これには気づかなかったです・・・。
って、調べたら結構出てきましたね。明らかに勉強不足でした。失礼しました。

リンク先に
> 別背景イメージが使えないので没です。
とありますが、以下で、普通に表示できました。
div.wrap { width:620px; overflow:hidden; background:url('background.gif') bottom; }
div.left { width:300px; float:left; }
div.right { width:300px; float:right; }
で、背景画像が使えれば、ボーダーを相殺するために
ネガティブマージンする必要もないですね。

では、なんで、みんなclearfixなんか使ってるのかな・・・と思ったら、
Netscape 7.1で、完全に表示されないですね・・・。

Netscapeはシェアが少ないので、デザインの崩れは許容できますが、
情報が表示されないのは、駄目ですね。
というか、何も「隠す」意図がないのに、hidden なんて指定は、
ハックになるかなと・・・。

で、もう少し調べたら、overflow:auto で解決しました。
※Win IE6、Firefox2、Opera9.2、Netscape7.1で。
　（Mac、今、ないので確認していませんが。）
しかもこれは仕様のようです。
http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#q22

でも、overflow:auto はMac IE5で、スクロールバーが表示されるようです。（未確認）
ただ、Mac IE5のような古いブラウザは（IE6も相当古いですが）、
スクロールバーが表示される程度の不具合には、我慢してもらおうと思います。

ということは、clearfixは、Mac IE5に対応するだけのために使われているのでしょうか？
惰性で使われて続けられているだけなのか、overflowによる親ボックスの高さ確保に、
なにかしら不具合があるのか、どちらなんでしょう。

回答No.5

edo_m18

若干回答とは違いますが・・。
clearfixをなぜそんなに嫌うのか分かりませんが。
clearfixはハックではないですよ。
ハックというのは、CSSのバグを利用したブラウザの差異を埋めるためのテクニックのことを言います。

clearfixは、CSSの仕様通りに記述してそれをfloatの対処に使っているにすぎないのでハックとは（厳密には）言わないと思っています。
なので、バグを利用して・・と思っているのであればバグではないので使用して問題ないと思いますがいかがでしょうか。

clearfixの概要は、親ボックスが内包している子ボックスのfloatを"解除する"テクニックです。
「親ボックスからはみ出している」と明記されていますが、
これは認識の誤りです。（言い方の問題かもしれませんが）
floatさせたボックスは、親ボックスから文字通り「float（浮く）」ので、親ボックスは子ボックスの範囲を識別しません。
そのために、子ボックスが親ボックスからはみ出しているように見えるのです。

ですが、clearfixを使うことで親ボックスの最後の要素にfloatをクリアするclearプロパティを指定することで、
親ボックスがfloatした子ボックスの後に出現する要素を識別するために（見た目的に）子ボックスを含んだ高さにまで親ボックスが広がるわけです。

これは自分の推察ですが、clearfixが広まった理由は、バグを利用したものではなく、かつ簡単に導入できるということから広く使われているものと考えています。（意味なくコピペして使ってる、というわけではないと思います）

余談ですが、自分自身はCSSの処理でどうしてそれがそうなるのかをある程度は検証や推察をしてから使うようにしています。
上記のclearfixに対する認識はそこから導き出したものです。（なので間違いもあるかもしれませんが・・）

なので、sweepeaさんがなぜclearfixをそんなに嫌うのか分かりませんが、自分は納得済みでclearfixを使用しています。

お礼

edo_m18さん、すいません・・・。

「OKWaveサポート担当」からメールがきまして、
> 投稿者自身が運営するホームページ・ブログや（略）
のURLがダメなのと
> 質問に対しての回答ではなく、他の回答者への指摘（略）
がダメなので、削除になったそうです・・・。

【禁止事項】
http://help.okwave.jp/okwave/beginner/prohibition.html
だそうです。

せっかく頂いていた、回答ですが、何卒ご了承ください。
ご回答、アドバイス、ありがとうございました。

でも、何を書かれていたのか、とても気になります・・・。
有益な情報であれば、上記の禁止事項を守った上で、再度ご投稿頂ければと思います。

(embedがobject...
↑途中で切れてる・・・。

補足

ご意見いただきありがとうございます。

物議を醸すようなことを書いてしまって、失礼しました。

> clearfixはハックではないですよ。
> ハックというのは、CSSのバグを利用した

私にとってはハックです。
CSSハックの正式な定義というものがない以上、何がハックで、
何がハックでないかは、個人の判断に委ねられると思います。

レンダリングのバグを利用した、CSSの記述はもちろんハックですが、
たとえ、定義通りによる使用であっても、力技で本来意図しない使用法で
使用されているものはハックと考えます。

ボックスの擬似要素afterに
・ピリオド「.」を付けて、
・高さを0にして、
・表示を隠す
「出して、隠す。」これは、私には紛れも無いハックです。

なぜなら、そのような記述は後方互換性が無いためです。
当然ですが、ブラウザの開発者達は、clearfixが正しく表示されるように、
レンダリングエンジンを開発する訳ではありません。

例えば、clearfixがIE7に対応するために、
min-height: 1%;
を追加したのがいい例だと思います。
個人でサイトを運用しているだけなら、1行の追加で済みますが、
何十というサイトを管理している、Web製作会社なら、頭が痛いはずです。
さらにそのサイトが、数百ページに及ぶようなものであれば。

理論上、min-height: 1%; は、表示に害を与えるようなものでは
ないでしょうが、通常、clearfixの使用者は、clearfixハックを
サイト内に多用するため、実務では、サイト内の各ページで、
本当に表示が崩れていないかを目視確認しなければなりません。
（たとえ、大丈夫だ、ということが分かっていても。）

一方、（当然ですが）左にマージンを20px空けたい時に、
margin-left: 20px;
とするのはハックではありません。
CSSの仕様書を、どう斜めから読んでも、解釈に差異が出ようがありませんから。
よって、margin-left: 20px; の意味は、ほぼユニバーサルなものだといっても良いでしょう。

> 「親ボックスからはみ出している」と明記されていますが、
> これは認識の誤りです。（言い方の問題かもしれませんが）

floatは、文字通り、浮かせるのが目的で、後続の要素はデフォルトで回り込みするので、
親ボックスからはみ出すのが仕様通りです。
（すいません、書き方が悪かったですね。IEの方が、独自の表示方法です。）

ですので、floatされた要素は、本来、その要素より「後」に開始する要素によって、clearされるべきでしょう。
clearfixは、言ってみれば、「前」に開始する要素によって、clearを試みているので、
美しくないコードが必要になってきます。

そもそもの私の質問は、「floatでなくpositionで書けないのか」です。
なぜなら、コンテンツや右メニューのカラムを「配置」したい訳であって、
別に「浮かせたい」訳ではないからです。
もし「配置」のためのプロパティが「float」なら、ネーミングが悪すぎます。

やっぱり、positionでは無理なんでしょうか？
もし無理だとしたら、それは誰が悪いわけではなく、W3Cに落ち度があると思います。
（個人的には、今後も（WHATWGでなく）W3Cに期待しますが。）

ちなみに、overflow:auto; は駄目ですかね？
結局、floatだし、これも、もっと厳密な人に言わせれば、
ハックと言われてしまうかもしれませんが・・・。

回答No.4

DrFell

背景イメージが使えないですよ。
右と左のdivの背景を別にしたい時、画像にしても、右の高さと左の高さが違う反復地紋では、支障がでます。

バックグラウンドでよければ、ご紹介したページの解説？のところに他のサイトの紹介があったと思うのですが、そこなら、背景を使った、リキッドレイアウトとか、固定とかいろいろリンクされてます。縦リキッドというか、divの癖に左右で成り行きな高さを揃える方法が紹介されていますので、デザインに応じて、使い分けしてください。っていうか、理解されたらもう、必要ないですね。今回はベタだったので、そこを紹介しました。

自分で調べもしない教えてチャン・やってチャンだと思っていたので、皮肉たっぷりに書いてしまいました。大変、失礼しました。

clarfixですか？多分、上記の方法もあることをみんな知らないのだと思います。人のサンプルをコピペし、できないといわれれば潔く諦める。clarfixも声の大きい人が書いたから、一気に広まったのではと推察してます。

overflow:auto;はなるほどですね。無視しているというかインストールしていないＵＡで不具合があるとは知りませんでした。勉強になりました。ありがとうございます。

お礼

ありがとうございます。

> 右と左のdivの背景を別にしたい時、・・・
なるほど。そういう場合はダメなんですね。

> 自分で調べもしない教えてチャン・・・
最近、結構、教えてチャン化してます・・・。反省してます。

> clarfixも声の大きい人が書いたから、・・・
良くあることですよね。有名な会社や書籍のコードにそうあるから、
という理由で、「なんでこんなことしなきゃいけないの？」
という疑問を持たずに、そのままコペる人。
おそらく、DrFellさんの言うとおりでしょう。

> 無視しているというか・・・
無視していいと思います。（仕事でそのような要求がなければ）
むしろ、Mac IE5に完全対応する方が、害があると思います。

意図的にでなく、単なる無知でIE5を使用しているユーザーに
「ほ～ら、こんなにレイアウト崩れてるよ。サポートも終わってるし、
セキュリティも怪しいし、早く、ちがうブラウザに乗り換えなさい」
というメッセージを伝える方が、良い、と考えます。

補足

DrFellさん、すいません・・・。

「OKWaveサポート担当」からメールがきまして、
> 投稿者自身が運営するホームページ・ブログや（略）
のURLがダメなのと
> 質問に対しての回答ではなく、他の回答者への指摘（略）
がダメなので、削除になったそうです・・・。

【禁止事項】
http://help.okwave.jp/okwave/beginner/prohibition.html
だそうです。

せっかく頂いていた、回答ですが、何卒ご了承ください。
ご回答、アドバイス、ありがとうございました。

でも、何を書かれていたのか、とても気になります・・・。
有益な情報であれば、上記の禁止事項を守った上で、再度ご投稿頂ければと思います。

(embedがobject...
↑途中で切れてる・・・。

回答No.2

DrFell

floatでもclearfix使わなくてもいけると思いますが、なぜ毛嫌いするのかわかりません。
sweepeaさんの文から想像するに、bodyに大きな３つのボックスがあり、そのうちの真中に更に２つのボックスが入っているのだと思います。

bodyに４つのボックスにされると、ハック？は必要ないと思われます。親ボックスからはみ出さないように親ボックスを使わない方法。また、デザインや条件次第では、３つのボックスでも「ハック（clearfix）を使わないといけない」とは限りません。clearfixでないハックもありますし、ハックはしないで、htmlを汚す方法もあります。

補足

ご回答ありがとうございます。

例えば、以下のコードをブラウザで表示してください。

--
<html>
<head>
<style>
div.wrap { width: 620px; background-color: red; clear: both; }
div.left { width: 300px; background-color: blue; float: left; }
div.right { width: 300px; background-color: blue; float: right; }
</style>
</head>
<body>

<div class="wrap">
<div class="left">
左カラム<br>
左カラム<br>
左カラム<br>
</div>
<div class="right">
右カラム<br>
右カラム<br>
右カラム<br>
</div>
</div>

</body>
</html>
--

左右カラムを囲むボックスの背景を赤色にしたいのですが、普通のブラウザ（Firefox等）では、子ボックスがfloatしている場合、子ボックスの大きさにあわせて、親ボックスが勝手に伸びることはない様なので、赤い部分が表示されません。

ちなみに、独自の解釈をするIE6は、赤い部分が表示されます。

ハックなしで、Firefoxで赤い部分を表示することはできますか？

回答No.1

SAYKA

できるよ
ただし、floatよりも煩雑で困難な調整方法が必要になるね。
調整方法、それはjavascript・・・・・

総合的にオススメできないかな。
それならtableの方が楽だけど・・・tableだし・・・

補足

つまり、cssでは出来ないってことでしょうか？

JavaScript使ったら、何でもできちゃいます。