ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：noname#64096 wrapperなしでCSSのレイアウトは組まない方がいいですか？
困り度：
  • すぐに回答を！
 いつもお世話になっております。
実はふとした疑問というか挑戦といいますか・・・
いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。
ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。
そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。
これは可能でしょうか？
どうかよろしくお願いいたいします。

body{
margin:0px;
padding:0px;
text-align:center;
}
/* ラッパーの設定*/
#wrap{
position:relative;
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{
position:relative;
width:100%;
height:50px;
background-color:#CCFFCC;
clear:both;
}
-------------------------------------
<body>
<DIV id="wrap">
<!-- ********* ヘッダー ******** -->
<div id="head">
</div>
<!-- ********* 左側 ******** -->
<div id="left">
</div>
<!-- ********* 右側 ******** -->
<div id="right">
</div>

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

-------------------------------------------------
これを・・・

body{
margin:0px;
padding:0px;
text-align:center;
}
/* ラッパーの設定*/
#wrap{
position:relative;
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{
position:relative;
width:100%;
height:50px;
background-color:#CCFFCC;
clear:both;
}
-------------------------------------
<body>
<DIV id="wrap">
<!-- ********* ヘッダー ******** -->
<div id="head">
</div>
<!-- ********* 左側 ******** -->
<div id="left">
</div>
<!-- ********* 右側 ******** -->
<div id="right">
</div>

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

</DIV>
<div id="foot">

</div>

</body>

-------------------------------------------------

このようにwrapperからはずしてレイアウトすることは可能でしょうか？色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・

かなり長文になりましたが、どうかよろしくお願いたします。
質問投稿日時：08/04/05 01:02
質問番号：3923076
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：tenderfeel 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>
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/06 11:53
回答番号：No.2
この回答へのお礼ありがとうございます。
clear　bothにも意味があったんですね・・・

当たり前ですが（笑


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

回答

 
回答者：tenderfeel 何かと不安、になるのは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>
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/05 02:15
回答番号：No.1
この回答へのお礼ありがとうございます。
footは間違いでした・・・

ただ、今IE6で確認したところ少しずれていました・・・
質問させていただくのに一番シンプルにしたのですが、実際は右部分がさらに2列わかれる(3)カラムの状態になっています。
ただ、3カラムの右側がなぜか一番左の下部分に回り込んでしまってました・・・
コードでfootの位置を戻したら治ったのですが・・・
できればfootをrepeat-xしたいので、なんとか解決方法があると嬉しいです。
どうかよろしくお願致します。
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ