а в чём вообще проблема?
1)
#ruler{
//display: inline-block; /* ??? */
font-size:0; /* вот с какой-то из новых версий Оперы у меня это не срабатывало, даже с техподдержкой ихней пришлось общаться */
display:table; /* а это костыль для Сафари */
}
#ruler div{
display: inline-block;
}
2)
#ruler{
overflow:hidden; /* популярный костыль, но использовать осторожно! */
}
#ruler div{
float:left;
}
И вообще не понял, что тут за разборки? Свойство float (кроме значения none), делает элемент блочным.