CODEWITHSUNDEEP
css
SamB
SamB

Reputation: 3245

Background color of nested elements not working

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>

Upvotes: 18

Views: 106132

Answers (7)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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>

Upvotes: 3

mshsayem
mshsayem

Reputation: 18008

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>

Upvotes: 1

adamdougal
adamdougal

Reputation: 334

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>

Upvotes: 8

Xavier
Xavier

Reputation: 1794

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>

Upvotes: 13

Ymin Hu
Ymin Hu

Reputation: 769

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

Upvotes: 0

Vazhumuni M
Vazhumuni M

Reputation: 1

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;
 }

Upvotes: -2

Pranav 웃
Pranav 웃

Reputation: 8477

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

Upvotes: 1

Related Questions