CSS problem with header

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

This looks like a clearing issue. Due to the fact that you have two floated elements in the parent container you will need to 'clear' them. You can do this in multiple ways.

1) Apply the following to the header:

#header
{
  overflow:hidden;
  height: 1%;
}

OR

2) Add a clearing div before closing the header div

<div style="clear:both"></div>

Answer 2

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; 

}