CSSハックの使い方を教えてください

質問

CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・

そこで、この際CSSハックを使おうと思っています。
といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・
など個別のブラウザに異なったCSSを指定することができるのでしょうか？
実際の記述方法を教えていただけないでしょうか？
「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・

ちなみに、この現象のほかの解決方法ってあるのでしょうか？

#wrapper{
position:relative;
width:870px;
margin:0px auto;
text-align:left;
}

#foot{
position:relative;
width:100%;
height:auto;
clear:both;
}

回答No.6

abril · ベストアンサー

推測でもう1パターン。
・#footは、#wrapperの内側で#wrapperに対して100％の幅である。
・#footは、#leftもしくは#rightの何れか描画エリアが垂直方向に長い方から常に35pxの余白を伴う。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
（省略）
<!-- ********* ラッパー ******** -->
<div id="wrapper">
<!-- ********* ヘッダー ******** -->
<div id="head">
ヘッダー
</div>

<!-- ********* 左側 ******** -->
<div id="left">
左側
</div>

<!-- ********* 右側 ******** -->
<div id="right">
右側
</div>

<!-- ********* フッター ******** -->
<div id="foot">
フッター
</div>

</div>

</body>
</html>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
/* ラッパーの設定*/
#wrapper {
overflow: hidden;
width: 870px;
margin: 0 auto;
text-align: left;
}
/* ヘッダーの設定*/
#head {
width: 870px;
height: 88px;
background-image: url(img/head-bg.gif);
margin: 0;
}
/* 左側の設定*/
#left{
width: 200px;
float: left;
margin: 0 0 35px 0;
}
/* 右側（メインコンテンツ）の設定*/
#right {
width: 650px;
float: right;
margin: 0 0 35px 0;
}
/* フッターの設定*/
#foot {
clear: both;
width: 100%;
}
----------------------------------------------------------------------
上記、#wrapperの内側に#footが入る場合の変更点：
・<div id="wrapper">からclass="clearfix"は削除。その替わり、#wrapperに"overflow: hidden;"を追加して#wrapperに高さを認識させる。
・#wrapperから不要になった"padding-bottom: 35px;"を削除。
・#leftと#rightにそれぞれmargin-bottomの値を35px追加。
・#footに"clear: both;"を追加。

これでもhackは不要です（少なくとも先程の検証環境上では。おそらくMac OSXでも主要モダン・ブラウザならば問題ないと思います。※これは検証していませんので保証しませんが）。

…余計な事かも知れませんが。
質問履歴を見るとこのHTML＋CSSの分野だけではなく、サーバ移管、CGI、PHP、グラフィック、フルFlashサイト、MovableType設置…等々、ご自身でビギナーと仰られている割には正直言って驚くほど一気に広範囲に手を出されている様ですが、一つ一つ最低限の基礎をきちんと理解するところまではクリアしてから進まないと、いつまで経っても正しい知識は身に付かずスキルを自分のものにすることはできず、従って応用が利かない状態が続くと思います。残念ながら現在の状態ではHTML＋CSSですら（質問者様はそうは思っていらしゃらないのかもしれませんが）「基本的な知識は身につけている」とは言えません。
趣味ではなくお仕事でされている以上、必要最低限の事は自ら学んで確実なものにしていかなければ、いくらこの場で解決方法を回答者から聞くことができたとしても、「そこまで」止まりでしょう。

お礼

いつもありがとうございます。

自分のいままでしてきた質問を掘り出されるのは正直、恥ずかしいですね（笑
確かに以前質問させていただいて、FLOATやPOSITIONについて理解するといったものの、ほとんど理解できないまま時間を消化しています・・・

問題の解決方法はNo2の方の回答とNo5のいただいた回答を組み合わせ？て解決しました。
四苦八苦でしたが・・・

余計なことなんてとんでもありません。
確かにそのとおりです。あくまで、自分ではですが、一番理解しているつもりのCSSプラスHTMLをなんとかものにするため努力していきたいと思います。

ありがとうございました。