It looks like you've uncovered a bug in Adobe Digital Editions with regard to image handling and the br tag.
The images render fine in calibre and the page renders fine in firefox. I tried various things with float, padding, margins and adobe's page-template, but still get the overlap. In fact I was able to crash ADE 1.7.2 by playing around with br tags. The bug seems to be dependent on the viewport being narrower than the combined width of two consecutive images. If it's wider, then they display without overlap, though side-by-side. If the first image is wider than the viewport, then the consecutive ones get pushed down but those will again overlap with each other if their combined width is too large. I've submitted it as a bug to Adobe.
It looks like post-processing the file to convert 2 br tags to <p /> is the only thing that works, sorry :/.