みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

【CSS】不具合の原因がわかりません。

すいません、少しややこしいかもしれませんが・・・。

下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に clear: both; float: none; をかけると不具合なく表示されます(縦に3つ並びます)。
ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。
(企業によるガイドラインなので詳しくは書けません。すいません・・・。)
「フッタ」から clear: both; float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。
いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり(左右ではなく上下でも)、高さを指定したりするだけでずれてしまいます。

原因は何が考えられるでしょうか?
よろしくお願い致します。

ちなみに宣言文は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
としています。



////////html////////
<body>
<div id="header">
ヘッダ
</div>

<div id="contents">
コンテンツ
</div>

<div id="footer">
フッター
</div>


////////css////////
#header{


}


#contents{
clear: both;
float: none;
}

#footer{
clear: both;
float: none;
}

投稿日時 - 2007-08-06 12:15:04

QNo.3231936

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

#No2のものです。

Dreamweaverで適用されないのは、痛いですよね。
私は、Dreamweaver 8を使用していますが、CS3で改善されている
のか気になるところです。

clear:bothを使う方法でしたら

<style type="text/css">
.clear_fix {
height:0px;
width:0px;
clear:both;
}
</style>

<div id="contents">
<div id="main">
メイン
</div>
<div id="menu">
メニュー
</div>
<div class="clear_fix"></div>
</div>
<div id="footer">
</div>

カラのdiv要素が増えてしまいますが、この方法が
最適かもしれません。メインやメニューにfloatした要素が
出てこない限り、レイアウトは崩れないので大丈夫だと思います。
もし、使うとしても、そのfloatした要素の親要素の最後に上記の
ソースのように「<div class="clear_fix"></div>」を付け足す
ことでレイアウトは崩れないと思います。

投稿日時 - 2007-08-07 12:55:17

お礼

ありがとうございます。

カラ要素の<div>を加えるということは、他の方の<br style="clear:both;">と似ていますね。
結局最後にclear:both;を含む要素を記述すると解決しそうですね。


自分は未だに2004なので、ズレているだけという可能性もあります。



余談ですが。
大手企業のサイトの一部なのでいろいろと制限がありまして。
自分でFTPでアップしたいんですけど、それもできなくて・・・。
面倒です。

投稿日時 - 2007-08-08 14:53:15

ANo.2

contents部分にfloatをした要素があるのなら、ソースを改めて、

/*fire fox、opera用*/
#contents:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

/*IE 5~6用*/
*html #contents {
height:1%;
}

/*IE 7用*/
*:first-child+html #contents {
height:1%;
}

このようにすると、footer部分のcssのプロパティは
必要ありません。

投稿日時 - 2007-08-07 09:12:13

お礼

アドバイス有難うございます。
こちらのやり方でも、回避できました。
ただ、Dreamweaver上ではずれているのが気になるところですが。

この場を借りて補足させて頂きます。
「コンテンツ」の中にさらに「メイン」と「メニュー」を入れて、float: left;で横並びに表示させています。
おそらく、そこのfloat: 要素がfooterにも影響を与えてるのだと思います。
でもこれってclear: both;で回避できないものなんですかね。
さらに「メイン」や「メニュー」の部分にもいろいろな要素が加わってはいるのですが。

<div id="contents">
<div id="main">
メイン
</div>
<div id="menu">
メニュー
</div>
</div>

投稿日時 - 2007-08-07 11:17:57

ANo.1

直るかどうかはわかりませんが、以下の項目をCSSに追記してみてはいかがでしょうか。いわゆる、clearfixとよばれるやつです。

#contents:after { content: ""; display: block; clear: both; }

もし、#contents内でfloatする要素があるなら、それが原因になっている可能性が高いのではないでしょうか。

上記のがダメなら、#contents内の最後の行に、

<br style="clear:both;">

なんてしてみてはいかがでしょう。

・・・素朴な疑問ですが、float:none;って、どんな効果があるのでしょう?使ったことが無いもので・・・。

投稿日時 - 2007-08-06 13:41:34

お礼

有難うございます。
取り急ぎ<br style="clear:both;">で修正できました。
こんな簡単なもので回避できるとは・・・。

clearfixも勉強になりました。


いろいろと規制があって難しいです・・・。


float:none;はclear: both;をすればとくに意味がないと思うのですが、なんとなくセットで使った方が良いかなと思っているだけです。とくに深い意味はありません(笑)

投稿日時 - 2007-08-06 14:48:23

あなたにオススメの質問