初心者なものでわからないのですが、
divのボックスの中にfloatで指定してブロック要素を配置した時、divの領域の背景色が表示されないんですが、なぜでしょうか?
IE6では背景色は表示できますが、その他のブラウザーでは表示されません。
どうもboxが表示されないみたいでmarginの指定をしてもborderの指定をしても何も表示されないのです。widthとheightをpxで指定してやればboxはその値になって表示されるのですが、リキッドレイアウトでheightが指定できない場合はどうしたらいいのでしょうか?CSSを使い始めたばかりで本当に初心者の質問ですいませんが、どなたか教えてやっていただけませんか?
IE6で背景色を表示できているということは、divにwidthを指定しています?
width:100%とか、値は何でもいいのですが。
でしたら、CSSに以下の記述を付け加えてみるのはどうでしょうか。
div:after{
content:””;
display:block;
clear:both;
border-top:0px transparent solid;
}
もしdivにwidthなどを指定していなければ、上のCSSに更にdiv{_height:1%;}も追加してください。
具体的なソースが分からないので、これで解決できるかどうか自信ありません。
もしだったら、構造を簡略化したものでも良いので、ソースをだしてもらえると
他の方々も回答しやすくなるかもです。スミマセン。
http://www.mozilla.gr.jp/standards/webtips0021.html
heightプロパティの注意点〜内容がfloat要素の場合 - Web標準普及プロジェクト
同様の状況がURLに乗っていました。
ソースを次のように変更したところNetscapeでは確認が取れました。
1. CSS .columnblockの変更
.columnblock{
width: 635px;
margin: 0px;
padding: 0px;
background-color: Yellow;
//height:1%; autoに変更
height:auto;
}
2. HTML <div class=”columnblock”>終了前
<!-- 前略 -->
<div class=”columnhalf”>
<h4>●●</h4>
<h5>●●</h5>
<p>●●</p>
</div>
<!-- この行を追加 -->
<br style=”clear:both;”>
</div>
HTMLを変更することが可能ならば、試してみてください。
回答ありがとうございます。
解決できました!!感動です!!
回答ありがとうございます。
追加してみましたが、解消しませんでした。
以下にソースを記述します。
columnblockの背景を表示させたいのです。
columnfullまでは背景が表示されます。
その下が表示されないのです。
●●
●●
●●
●●
●●
●●
●●
●●
●●
●●
●●
/*-------------css-----------------*/
.columnblock{
width: 635px;
margin: 0px;
padding: 0px;
background-color: Yellow;
height:1%;
}
.columnblock .columnhalf{
float: left;
width: 300px;
margin: 10px 0px 0px 10px;
border: none;
}
.columnblock .columnfull{
clear: left;
width: 600px;
margin: 10px 0px 0px 15px;
}