Я бы немного изменил бы разметку, обернул бы элементы в блоки с общим классом и прописал бы общие стили. например float, повторяется кучу раз, не оптимально совсем. у вас также не почищен поток, можно добавить после элементов с float пустой див со стилям
.clearfix{
margin:0;
padding:0;
clear:both;
}
Но с точки зрения семантики это не правильно, лучше
.headerWrapper:after{
content:" ";
display:table;
clear:both;
}
Что касается сползающих элементов,они имеют фиксированную ширину, и в данном случае блоку родителю можно задать ширину в пикселях, т.к. по умолчанию ширина 100% , или ограничить с помощью min-width. Но в при данных условиях это не обязательно. Беглы осмотр, но оптимизации код ваш требует, глобальной))) удачи в учебе)
