Geek Answers Handbook

CSS background color not working

I set the background color of the outer div to blue, but it does not appear. Why?

CSS

.question-template { width: auto; height: auto; background-color: blue; } .question { float: left; margin: 10px; } .participants { background-color: green; float: left; margin: 10px; }​

HTML

 <body> <div class="question-template"> <div class="participants">234</div> <div class="question">Some lorem ipsum text</div> </div> </body>

Demonstrating it http://jsfiddle.net/4zjtp/

+6
source share
5 answers

Try it like this.

 .question-template { width: auto; height: auto; background-color: blue; overflow:auto; }
+4
source

This is because both children are floating to the left. This means that the container will not stretch to the full height necessary to contain the children.

To solve this problem you need to add a clearfix class, for example, to your css:

 .clearfix:after { content: ""; display: table; clear: both; }

Then add the class to your HTML as follows:

 <div class="question-template clearfix">

See here for more information: http://css-tricks.com/snippets/css/clear-fix/

+4
source

Live demo ........... Hello, now define the parent div .question-template overflow:hidden;

 .question-template{ overflow:hidden; }

Method two

now clean the parent

Css

 .clr{ clear:both; }

HTML

 <div class="question-template"> <div class="participants">234</div> <div class="question">Some lorem ipsum text</div> <div class="clr"></div> </div>

Live demo

+2
source

You need to apply a clear float on the parent div to make sure it occupies the inner elements. You can either insert <div style="clear:left;"></div> before closing the parent, or apply the clearfix class in the parent div.

 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }​

Then you just add the clearfix class to the parent div

 ... <div class="question-template clearfix"> ...

Working example

+1
source

Add overflow:auto to .question-template

http://jsfiddle.net/4zjtp/2/

0
source

More articles:


All Articles