Question

I have got a div id event_container and two div classes inside that div id by the class name create_event_button and search. I want to have a specific background for the event container and then style the classes differently.

Below is the css styling of these elements :-

#event_container{

    background: red;
}

 #event_container .create_event_button {

        margin-left: auto;
        margin-right: auto;
        display: block;
        float: right;
        text-align: center;
        width: 150px;
        color: #1C1C1C;
        background: #A9D0F5;
        font-size: 150%;
        font-weight: bold;
        padding: 1em;
    }
#event_container .search {

    margin-left: auto;
    margin-right: auto;
    display: block;
    float: left;
    width: 480px;
    background: #A9D0F5;
    padding: 1.4em;

}

The inner div stylings are working all right but the #create_event is not giving me a proper background color.

I have been trying to hack around this one but have not got any success yet. It would be great if anyone could answer it.

Thanks,

Answer 1

The outer div contains only two floats, which are allowed to slip out of the parent div, unless you apply some clearfix trick ( there are many solutions: http://www.google.com/search?q=clearfix ), or simply use overflow:hidden; on the parent div to always contain any inner floats:

http://jsfiddle.net/E4J3Q/