掲示板/スタイルシート質問板/過去ログ/一覧/ 子要素にfloatしたときのはみ出しについて

0 名前：リコ： 2007/02/06（火） 00:09 ID:Db9lUlR/ sub-uD: はじめまして。
初心者でお恥ずかしい質問なのですが、教えてください。

CSSのfloatのことなのですが、
floatすると親要素からはみ出てしまいます。

親要素で背景などを設定しているため、
はみ出させないようにしたいのですが・・・

親要素にもfloatをかけたらはみ出さないで
綺麗になるのですが、この方法は正しいのでしょうか？

ほかにきちんとした正しい方法があるのでしょうか？

宜しくお願い申し上げます。

1 名前： K+S ： 2007/02/06（火） 00:09 ID:nROqylMa sub-YS: > floatすると親要素からはみ出てしまいます。
これを確認されたブラウザは何でしょうか？
IE6.0でそのようなことが起きるというのはちょっと想定外なので。

実際に試されたHTML及びCSSソースを拝見しないと的確な回答はできませんが…。

> 親要素にもfloatをかけたらはみ出さないで
> 綺麗になるのですが、この方法は正しいのでしょうか？
それで問題ないなら、HTML的には問題ありません。
floatをかけた親要素の親要素レベルで影響がでる可能性がありますが。
float:none のボックスが none 以外の値になるということに対して、影響がないか考慮しなければなりません。

> ほかにきちんとした正しい方法があるのでしょうか？
正しいという基準によってですが、HTML的にはValidである以上、CSSでどんな強引な指定をしても正しい方法になります（あくまでValidなので）。

適切な方法という意味であれば、
http://www.geocities.jp/multi_column/float/05.html
が参考になるかもしれません。

2 名前：リコ： 2007/02/06（火） 00:09 ID:Db9lUlR/ sub-uD

早速のレスをまことにありがとうございます。
大変わかりにくい質問のしかたをしてしまったのに、
ご丁寧に回答いただき感謝しております。

実際試しましたのは以下のソースです。

まず以下のようなHTMLがあります。

<body>
<div id="container">
	<div id="wrapper">
	
			<div id="contents">				
				<div id="waku">
				</div>				
				<div id="waku">
				</div>			
			</div>			
			
			<div id="footer">	
      </div>	
					
	</div>
</div>

</body>

続いて次のようなCSSがあります。
この場合は、footerでfloatが解除されているので、
問題ありません。

body {
	text-align: center;
	background: #feedfa;
}

#container {
	width: 753px;
	margin: 0px auto;
}

#wrapper {
	background: #333333;
	width: 753px;
	text-align: center;
}

#contents {
	float: left;
	background: #FFFFFF;
}

#waku {
	height: 150px;
	width: 556px;
	border: 1px solid #CCCCCC;
}

#footer{
	height:36px;
	width: 745px;
	clear: both;
}

ですが、もし、#footerでfloatを解除しない場合は、
#wrapperから#contentsがはみ出してしまいます。

このときの対応として、#wrapperにfloatをかけると、
きちんと#contentsが#wrapperにおさまります。

この方法は正しいのだろうかと思いまして質問させていただきました。

宜しくお願いいたします。

3 名前：リコ： 2007/02/06（火） 00:09 ID:Db9lUlR/ sub-uD: すみません！
教えていただきましたサイトを確認しましたら、
同じことが載っていましたので解決いたしました！！

読み落としていたため、
質問を繰り返してしまい申し訳ございません。

大変助かりました。

心よりありがとうございます。

4 名前： K+S ： 2007/02/06（火） 00:09 ID:nROqylMa sub-YS: id="waku" とありますが、
id="waku1" , id="waku2"
とするか、
class="waku" , class="waku"
とすべきです。

可能であれば、そのdiv要素に包含されるべき内容の意味に相当するid名を用いることが好ましいです。

5 名前：リコ： 2007/02/06（火） 00:09 ID:Db9lUlR/ sub-uD: K+Sさま、再度レスありがとうございます！
おっしゃるとおりですよね！

教えていただきありがとうございます。

本当にものすごく助かりました。
感謝しております。