HTML容器未正确设置子div的样式

Question

I am trying to set the background color of my container div and all child div's within it but I can't get it to work for some reason, and I am unsure as to where I am going wrong.

When I set the background-color and a border on the container you can see that it is not actually "containing" any child elements.

#facility_container{
    text-align: center;
    padding: 2px;
    width: 100%;
    background-color: #ffffff;
}

Here is a JSFiddle demonstrating where I am at so far.

Answer 1

Add overflow: hidden to #facility_container , #facility_general_info , #facility_section_info

Float makes the inner divs not expand the outer ones. Using table settings to style your page is a big no-no in HTML5.

working jsfiddle: https://jsfiddle.net/nayish/docg128w/8/

Answer 2

The issue here is that, since your #facility_info divs are floated, they are taken out of the normal element flow, and therefore do not affect the width or height of the #facility_container div.

As suggested by Jon Ducket in his book HTML & CSS :
Set the container div's overflow property to auto, and its width property to 100%.

#facility_container {
    text-align: center;
    padding: 2px;
    width: 100%;
    background-color: #ffffff;
    width: 100%;
    overflow: auto;
}

In this case, since #facility_general_info already takes up width and height, it is not necessary to set #facility_container 's width to 100%, but the above-mentioned property values can be used for elements that contain only floated elements.