проблема с контейнерами HTML

Question

У меня проблема при попытке установить фон .header - ничего не меняется, пожалуйста, помогите, я так запутался.

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

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

Попробуйте добавить overflow: hidden к .header.Если вы перемещаете какие-либо дочерние элементы (input, .logo, .search и т. Д.), А затем не очищаете их, элемент .header не будет расширяться, чтобы соответствовать содержимому.

Таким образом, шансыфон элемента .header red, но вы просто его не видите.

См. следующие примеры:

Float, no clear - показывает поведение, которое выописывают

http://jsfiddle.net/qrS3u/

Float, с прозрачным фоном - красный

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

Редактировать

Для получения дополнительной информации о том, почему это происходит с плавающими элементами и как их исправить, проверьте эта статья CSS-хитрости

Answer 2

вы просто скучаете </div>.в противном случае он просто отлично работает.

проверьте скрипку Пример: http://jsfiddle.net/Znw7P/

Answer 3

Вы можете попробовать изменить свой CSS с этого:

.header {
    background-color: red;
}

на это:

.header {
    background: red;
}

Answer 4

Вам не хватает одного закрывающего тега div ("</div>").Это может быть фактором.

Кроме того, вам нужно обернуть код CSS в теги <style>.Вместо последних трех строк используйте это:

<style type="text/css" media="screen">
    .header {
             background-color: red;
               }
</style>