Динамическое добавление divs вызывает странное разделение стилей

Question

У меня возникает раздражающая проблема при динамическом добавлении div в существующий div. Я попытался использовать функцию appendChild, а также функцию добавления jQuery; оба дают тот же результат. Вы можете увидеть проблему на этом jsFiddle:

http://jsfiddle.net/debu/5b3Qr/

При нажатии на кнопку «добавить материал», это добавит несколько дивы, созданных динамически. Внутри цикла for он создает div, а затем добавляет к нему два текстовых div, а затем добавляет их в «mainDiv». Затем за пределами цикла for я создаю еще два div; один из них имеет стиль, применяемый к нему, который имеет фоновый цвет, установленный на оранжевый.

Проблема заключается в том, что divs, созданные в for-loop, наследуют этот оранжевый цвет фона, хотя .. ну, хотя элемент с этим фоном добавляется после их. И это не похоже на абзац, который появляется после того, как на оранжевом фоне div наследуется оранжевый; он остается как следует, белый.

Я много играл с этим и не нашел способа решить его. Есть идеи?

Приветствие,

Debu

Answer 1

Оказывается, у тебя были проблемы с дивой (класс compHolder) вы добавляете, подавшие float:left. Вам необходимо очистить popupHeader3 с помощью clear:both;, чтобы остановить фон заголовка, воздействующий на эти 3 div, прежде чем он начнет действовать странно.

Как так:

.popupHeader3 { 
    background-color: #FFBA9B; 
    margin-top:1px; 
    color: #000000; 
    font-family: "ProximaNova"; 
    font-size: 18px; 
    clear:both; 
} 

См: http://jsfiddle.net/zyZ7Z/