Background color of nested elements not working

Question

I set the background color of the outer div (question-template) to blue, but it is not displayed. Why?

A demo of it:

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
}

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

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

score 13 · Accepted Answer · edited Feb 27 '23 at 09:05

13

Try to add overflow to the outer div's style:

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

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

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

edited Feb 27 '23 at 09:05

Tomerikoo

18,379
16
47
61

answered Oct 29 '12 at 09:01

Xavier

1,672
5
27
46

Now when I specify the width of the question-template and increase the length of the question, the text goes down below the participants div. How can I makes it stay on the same line? – SamB Oct 29 '12 at 09:20
You can use display:inline-block. – Xavier Oct 29 '12 at 09:40

score 8 · Answer 2 · edited Feb 27 '23 at 09:27

It's because both of your child elements are floated left. This means that the container won't stretch to the full height needed to contain the child elements.

To solve this you need to add a clearfix class such as this to your CSS:

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

And then add the class to your HTML like this:

<div class="question-template clearfix">

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
}

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

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

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

score 3 · Answer 3 · edited Feb 27 '23 at 09:37

Define your parent div .question-template with overflow: hidden;:

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
    overflow: hidden;
}

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

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

Or add a clear div to the parent:

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
}

.clr {
    clear: both;
}

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

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

score 1 · Answer 4 · edited Feb 27 '23 at 09:29

Add overflow: auto to .question-template:

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

.question {
    float: left;
    margin: 10px;
}

.participants {
    background-color: green;
    float: left;
    margin: 10px;
}

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

score 1 · Answer 5 · answered Oct 29 '12 at 09:01

You need to apply a clear the float on the parent div to make sure that it occupies the inner elements. You could either insert a <div style="clear:left;"></div> before the parent closes or apply a clearfix class on 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

score 0 · Answer 6 · answered Feb 22 '23 at 11:20

0

check your display property, maybe its inline? change it to block or something else.

answered Feb 22 '23 at 11:20

Ymin Hu

619
6
7

score -2 · Answer 7 · edited Mar 18 '20 at 10:07

-2

Use fixed height for <div> element. It will be like this

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

edited Mar 18 '20 at 10:07

Michael Nelles

5,426
8
41
57

answered Mar 18 '20 at 08:17

Vazhumuni M

1

You can add overflow:hidden to the .question-template class. In this way parent class .question-template will try to accommodate as per child elements and occupies the own dimensions. – shekhardtu Mar 18 '20 at 09:49

Background color of nested elements not working

7 Answers7

Linked