Что заставляет FireFox сдвигать поплавок влево на 50%?

У меня есть набор divs с одинаковой шириной и высотой. Все они установлены влево и 50% их контейнера (контейнер составляет 100% ширины страницы). При некоторых ширинах экрана пара divs сдвигается более чем на 50%, как будто есть еще один элемент.

<div class="container">
<div class="pod">
<img />
</div>

<div class="pod">
<img />
</div>
</div>

Если я отрегулирую ширину окна, я могу исправить проблему. Это происходит при нескольких ширинах окна и (из того, что я вижу) только в FireFox.

Я буду работать над jsfiddle, чтобы увидеть, могу ли я воспроизвести его, чтобы показать его. До тех пор кто-нибудь имел дело с этим раньше и нашел проблему?

----- EDIT ----- Я также могу воспроизвести это в Chrome, изменив ширину страницы. Это чаще встречается в FireFox.

Если я изменил поля с 50% до 47%, проблема исчезнет...

----- РЕДАКТИРОВАТЬ ----- Оказывается, что "разделение", которое я делаю, вызывает проблему.

Два jsFiddles:

Как сейчас реагируют divs (я забыл упомянуть, что некоторые из divs "расколоты". Не думаю, что это было частью проблемы до сих пор) http://jsfiddle.net/dcp3450/xvMHR/

Как дивы реагируют без разделения: http://jsfiddle.net/dcp3450/Xzrgv/

Я думаю, что вложенные "50%" вызывают некоторое округление с разделенными элементами, что вызывает проблему. Любые идеи о том, если это правда и как решить проблему?