Андрей Федоров

Можно еще так. Закодирована картинка 1х1 пиксель.

.col-1 {
  background: 100%  repeat-y url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAMSURBVBhXY/jPwAAAAwEBAGMkVdMAAAAASUVORK5CYII=);
}

Зачем вам в принципе float'ы? Сделайте везде display: inline-block; и vertical-align: middle;
Или я не понял изначальную задумку. Картинку бы увидеть.

э...

#wrapper {
  box-shadow: 0 0 20px rgba(20,20,20,.5);
}

upd: посмотрите тут codepen.io/aliencash/pen/EjaoyO

В чем вопрос? Если валидатор пропускает...
Однако я бы навесил javascript на блок, чтобы сделать его ссылкой.

К сожалению, если изначально не продуман дизайн под мобильные верстка объем работ будет большим.

В хроме, в инспекторе есть режим эмуляции разных устройств. Идите от большого дисплея к малому, добавляйте соответствующие media query в сss для каждой ширины дисплея, исправляющие верстку.

bootstrap вашей проблемы не решит, т.к. придется все переверстывать заново с классами бутстрапа.

Возможно у вас file.php сохранен в кодировке utf-8 c BOM. Сконвертируйте его в utf-8 без BOM.

А зачем класс менять? Может просто свойство поменять?

document.getElementByClass('button1').style.background = 'yellow';

Предлагаю создать свой шрифт, в котором будет только один требуемый вам символ (для экономии размера).
Даже разбираться с программами рисования шрифтов не надо - на днях на geektimes статья была geektimes.ru/post/246800