Menu
I set the background color of the outer div 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>jsFiddle
288
If the CSS background-image is not working, then there are several reasons for this. It often happens that you are not setting the path of the background image correctly, due to which your website background-image not working CSS.
The background-attachment feature is used to scroll or fix the background image in CSS because the scroll is its default value. This property has the following values. Local: In this value, the background images are scrolled along with the content. Fix: Using this value fixes the background image with the page.
If the CSS file is not properly linke d to the HTML file, the background would be white and not show any style or color as soon as the website loads. To diagnose this error, you can check with the inspector element by right-clicking on the inspector tool page of your browser.
If there is no HTML content in the element, its height or width is zero, or both are set to zero, meaning that the background image of your website is technically loaded correctly but is hidden because its element is 0px. 0px height means that the element will not be visible like background-image etc.
Try like this..
.question-template {
width: auto;
height: auto;
background-color: blue;
overflow:auto;
}
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">
See here for more info: http://css-tricks.com/snippets/css/clear-fix/
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
