Я не очень знаком с любыми программами psd-css, так что это немного сложно понять ... для верхних фиолетовых линий кажется, что у вас есть 2 изображения: 1 - 960 x 30px Layer-13.png, и затем есть 24 x 30px Layer-12-rx.png, который повторяется в бесконечность в обоих направлениях под этим. Кажется, проще всего получить то же самое изображение в формате png - Layer-12-rx .png, чтобы сделать то же самое в нижней части страницы - повторить это изображение под тем, которое уже есть: Layer-7.png.
Что касается вашего вопроса о строках относительно вашего контента: я замечаю, что почти все ваши div'ы имеют позицию: к ним применяется абсолют. Будьте осторожны с этим, потому что когда этот атрибут применяется, он удаляет div из обычного потока того, как css позиционирует вещи, и тогда вам нужно начинать указывать все, а не div просто следовать друг за другом естественным образом - что хорошо для таких вещей, как ваши нижние строки просто естественным образом позиционируются под вашим контентом, как бы там ни было. Элемент div, в котором находятся строки нижнего колонтитула, также имеет следующую позицию: к нему применяется абсолют, что означает, что вам всегда придется указывать, где именно сидеть на каждой странице. Для начала нужно изменить его на position: относительный, а затем поиграть со значениями left: и top: до тех пор, пока он не окажется в нужном месте. Затем он должен каждый раз располагаться под текстом.
Хорошая справка - школы W3 - для получения информации о позиционировании проверьте: http://www.w3schools.com/css/css_positioning.asp