Не идет бекграунд

Попробуйте стилях wrapper добавить

overflow:hidden;

Добавьте перед последним закрывающим дивом вот это

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

http://codepen.io/chipusy/pen/apVoPw

попробую, спасибо, но ура так получилость

width: 100%;

overflow: auto;

---------- Добавлено 27.01.2017 в 15:45 ----------

что лучше оставить

- с очищающим блоком или добавку в стили width: 100%;

overflow: auto;

поскольку оба способа работают

я обычно добавляю в стили:

.clear {
clear: both;
}

и в код:

<div class="clear"></div>

.wrapper:after {
  content: '';
  display: table;
  clear: both;
}

Коллега, вы используете в примере кода два HTML элемента внутри блока с CLASS=WRAPPER. Так вот, у вас не заливается фон поскольку блок WRAPPER не видит плавающие влево и вправо внутри него элементы. Как сделать так, чтобы он начал их видеть? Сущесвует три равнозначных по силе способа:

1. В html документе добавить лишний технический блок и прописать ему в стилях правило clear:both;

2. Сгенерировать такой же блок, но на лету только в стилях с помощью псевдокласса :after {content:"";};

3. Добавить внешнему блоку WRAPPER правило overflow - любое значение кроме значения по умолчанию vidible, а именно hidden / auto. Я рекомендую именно hidden.

Повторюсь, все вышеописанные три способа равнозначны друг другу, и только вы можете выбирать из их трёх наиболее удобный для себя, или привычный. Но все три из них полностью равнозначны и абсолютно корректно работают во всех браузерах на сегодняшний день.

Немного расширю свой предыдущий ответ на конкретных примерах.

Вариант первый.

Обратите внимание, что нужно писать именно display: block. Так будет правильно.

div.wrapper:after {

  content: " '';

  display: block;

  clear: both;

}

Вариант второй.

<div class="wrapper">

  <div class="float-left"></div>

  <div class="float-right"></div>

  <div class="clear"></div>

</div>



div.wrapper div.clear {

  clear:both;

}

Вариант третий, наиболее оптимальный на мой взгляд:

div.wrapper {

  overflow:hidden;   /* или же overflow:auto; */

}

Вот три варианта, только уже в коде с правильным и корректным синтаксисом.