Объясните, пожалуйста, почему в данном случае некорректно отображаются три колонки, свёрстанные DIV'aми
Так понимаю у второго дива не указана ширина. Думаю правильно было бы всем float: left указать.
  между дивами лучше убрать
Прочитайте про inline, vertical-align
htmlbook.ru/css/display
htmlbook.ru/css/vertical-align
Посмотрите вот этот пример codepen.io/iiil/pen/JljFn
Если коротко, Вы используете display: inline, превращая блочные элементы в встроенные. А к ним применяется vertical-align, который по умолчанию стоит  	baseline. Из-за этого картинка едет вверх, так как она выше соседних.
Да, и на inline элементы вообще не надо навешивать обтекания - регулируйте text-align, ширина в 30% на них вообще не действует, как и заданная в процентах. Вы явно плаваете в html/css.