Question

I am css beginner and I got a little problem. I am trying to make simple header with logo on the left and some elements on the left side of the header (util). The code is below. It works but I set my header background to Green color and it missing when I open the page. What have I done wrong?

<div id="wrapper">
        <div id="header">
            <div id="logo">                
            </div>
            <div id="util">
                <a href="#">Vladimir Vucetic</a>
            </div>
        </div>        
    </div>

body 
{
    padding: 0;
    margin: 0;
    font: small Arial, Helvetica, Verdana, sans-serif;
}

#wrapper 
{
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;   
    margin-left: 20%;
    margin-right: 20%;
}

#header
{ 
    background-color: Green;    
}

#logo
{
    background: url(/images/logo.gif);  
    background-repeat: no-repeat; 
    width: 94px;
    height: 24px;
    float: left;
}      

#util
{
    padding: 0;     
    float: right;    
}

Answer 1

You have floated elements in your header. That’s why it behaves like it has no children. So try

#header
{ 
    background-color: #0f0;
    overflow: hidden; 

}