CODEWITHSUNDEEP
htmlcss
user2781125
user2781125

Reputation:

Background color not working for div containing floating elements

If you can see over here http://jsfiddle.net/NE3rZ/3/

I have set the background color to red for my container, but its not showing.

.container {
    width: 100%;
    background: red;
}

Please help. I need to show the background color if container contains 2 rows and the second row is not fully covered.

Upvotes: 1

Views: 77

Answers (3)

roostaamir
roostaamir

Reputation: 1968

This problem occurs when you don't define a definite(I mean not percentage) WIDTH AND HEIGHT for the parent div. You can either set a height property for your parent div or use overflow:auto property for your parent div and the parent will fit its own height automatically based on what's in it!!(it is the best solution for floating child divs)

Upvotes: 0

Ashis Kumar
Ashis Kumar

Reputation: 6554

You need to add overflow: auto to you container style

.container {
    width: 100%;
    background: red;
    overflow: auto;
}

JSFIDDLE

Check the same over here How to make a div grow in height while having floats inside

Upvotes: 1

Kaloyan
Kaloyan

Reputation: 7352

You don't have a clear after the floated elements. I'd suggest using overflow: hidden in this case:

http://jsfiddle.net/NE3rZ/4/

Upvotes: 1

Related Questions