- ベストアンサー
wrapperなしでCSSのレイアウトは組まない方がいいですか？
- CSSのレイアウトを組む際、wrapperなしで行うことは可能ですが、いくつかの注意点があります。
- wrapperを使用せずにレイアウトする場合、フッターの長さがページごとに異なる場合に問題が生じることがあります。
- また、wrapperなしでレイアウトする場合、ブラウザのサイズが変わるとレイアウトが崩れる可能性があるため、注意が必要です。
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
3カラム…こんな感じですか？（#center入れてみた） うちの環境だと前も今回もズレてないんですが… #leftか#rightか3カラム目のDivにmarginを設定してたら、IEのバグで倍になってカラム落ちしたのかもです。 #footが#wrapの中に入ってたときは、#footがclear:bothしてたので、外に出すなら代わりにclear:bothするものを入れます。 前の回答ではbr、この回答ではhrでclear:bothしています。 *{ margin:0; padding:0; } body{ text-align:center; } hr.cl{ clear:both; border:0; visibility:hidden; } /* ラッパーの設定*/ #wrap{ width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 中央の設定*/ #center{ width:400px; height:550px; float:left; background-color:#99CC99; } /* 右側の設定*/ #right{ width:200px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ width:100%; height:50px; background-color:#CCFFCC; } <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <div id="center"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <hr class="cl" /> </DIV> <!-- ********* フッター ******** --> <div id="foot"> </div>
その他の回答 (1)
- tenderfeel
- ベストアンサー率56% (215/379)
何かと不安、になるのはposition:relativeの影響じゃないですかね。 子にabsoluteが無ければ消してもいいと思います。 下のXHTMLソースだと#footが2個あるんですが、これは記入ミスですよね？ 以下、適当に書いた奴です。 *{ margin:0; padding:0; } body{ text-align:center; } br.cl{ clear:both; border:0; visibility:hidden; } /* ラッパーの設定*/ #wrap{ width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ width:100%; height:50px; background-color:#CCFFCC; } <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <br class="cl" /> </DIV> <!-- ********* フッター ******** --> <div id="foot"> </div>
お礼
ありがとうございます。 footは間違いでした・・・ ただ、今IE6で確認したところ少しずれていました・・・ 質問させていただくのに一番シンプルにしたのですが、実際は右部分がさらに2列わかれる(3)カラムの状態になっています。 ただ、3カラムの右側がなぜか一番左の下部分に回り込んでしまってました・・・ コードでfootの位置を戻したら治ったのですが・・・ できればfootをrepeat-xしたいので、なんとか解決方法があると嬉しいです。 どうかよろしくお願致します。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます。 clear bothにも意味があったんですね・・・ 当たり前ですが（笑 本当にありがとうございました。