Заменить все float: left; на display: inline-block;
Это даст другой алгоритм заполнения страницы блоками. Конкретно в этом случае первый синий блок окажется прижат к левому краю, по высоте сразу после .foo
* Не забыть вставить что-то типа margin-left: -0.25em; для каждого из блоков, чтобы нивелировать ширину пробела, которая появляется между элементами с display: inline-block; Впрочем, есть и другие техники на этот счёт.
Как вариант:
Редактор можно использовать любой, от блокнота до полноценных ide. Мой выбор пока - Notepad2, впрочем это дело вкуса.
В качестве ftp-клиента можно использовать FlashFXP. В нем можно настроить, какой программой редактировать файлы.
Суть такая: при просмотре папки на сервере нажимаем Ctrl-E, файл скачивается и открывается указанной программой, при сохранении файл автоматически закачивается обратно.