I am given wrapper div height auto but background color and image is not working?

<style>
.wrapper{
    width:900px;
    height:auto;
    padding:0px;
    margin:auto;
    background:#000000;
    position:relative;
    }
.header{
    width:900px;
    height:200px;
    float:left;
    padding:0px;
    margin:0px;
    background:#00FFFF;
    }
.body_content{
    width:900px;
    height:500px;
    float:left;
    padding:0px;
    margin:0px;
    background:#6666FF;
    }
.fotter{
    width:900px;
    height:150px;
    float:left;
    padding:0px;
    margin:0px 0px 25px 0px;
    background:#336600;
    }   
</style>

<div class="wrapper">
<div class="header"></div>
<div class="body_content"></div>
<div class="fotter">sss</di开发者_JAVA技巧v>
</div>

Since you float everything in the wrapper, the browser won't pickup the size of your wrapper div, ie, it consider it has 'zero' height.

Solution:

use the magical overflow keyword in wrapper:

.wrapper{
    overflow:auto;
    //...

 }

This is what I see:

What are you expecting?

@sridhar ,

For div the background color should be given like this right

background-color:#003366 and background image sould be given like this

background-image: url(../images/test-background.gif);