Question

I have problem when I try to set a background to .header – nothing changes, please help, I am so confused.

HTML

<div class='container'>
    <div class='header'>
        <div class='logo'></div>
        <div class='search'>
            <form class="search" method='post'>
                <input type='text' name='text'>
                <input type='submit' value='search'>
            </form>
        </div>
        <div class='utility'></div>
    </div>
  </div> <!-- excuse me i forgot to type </div> here in the post -->

CSS file

html {
    background: #62B0FF;
}

body {  
    text-align:left;
    font: 13px /1.5 arial,helvetica,tahoma;
    color: black;
}

/* i wanted to put 120px free space
   to see background
   but nothing is there */

.container {
    width: 960px;
    margin:0 auto;
}

.header {     
    margin-bottom: 20px;
    background: black;
}

.logo {     
    width: 220px;
    float: left;
}

.search {    
    float: right;
    text-align: right;
    width: 620px;
}

.utility {
    width: 500px;
    float: right;
}

Answer 1

Try adding overflow: hidden to .header. If you are floating any child elements (input, .logo, .search etc) and then not clearing them, the .header element will not expand to fit the content.

So, the chances are that the background of the .header element is red, but you just cannot see it.

See these examples:

Float, no clear – shows the behaviour you are describing

http://jsfiddle.net/qrS3u/

Float, with clear – background is red

http://jsfiddle.net/qrS3u/1/

Edit

For more information about why this happens with floating elements and how to fix them, check out this CSS-Tricks article