php - PHP/CSS で動的に作成されたグリッドは、Android Firefox ブラウザーでのみ正しく表示されませんか?

Question

私は、私のレスキューのウェブサイト用に新しい養子縁組可能な犬のリストに取り組んでいます. サード パーティの API から写真と情報を取得して一覧表示する一覧ページを作成しました。

http://dallaspetsalive.org/new-adoptables/

目標は、通常のブラウザーでは、画像と情報を含む div が左または右に浮いて 2 列のリストを作成することですが、画面が小さくなると 1 列になります。

これは、Android の Firefox を除いて、私が試したすべてのブラウザーで機能します。なぜそこが違うのか不思議です。divが重なっているようなものです。これがスクリーンショットです: http://i.imgur.com/rCKE6cB.png

これがPHPコードです。

                foreach($dogsList as $dog) {
                    $num = $num + 1;
                    if($left) {
                        echo "<div id=\"pet-search-left\">";
                        $left = 0;
                    } else {
                        echo "<div id=\"pet-search-right\">";
                        $left = 1;
                    }

                    echo "<a href=\"dog-profile?id=";
                    echo $dog['animalID'];
                    echo "\" style=\"text-decoration: underline; color: #006bb7;\">";
                    echo "<img src=\"";
                    echo $dog['animalThumbnailUrl'];
                    echo "\" style=\"float: left; margin-right: 10px;\" /><h3>";
                    echo $dog['animalName'];
                    echo "</h3></a>";
                    echo $dog['animalGeneralAge'];
                    echo " ";
                    echo $dog['animalSex'];
                    echo "<br />";
                    echo $dog['animalGeneralSizePotential'];
                    echo "<br />";
                    echo $dog['animalBreed'];
                    echo "</div>";
                }

通常のサイズに関連する CSS は次のとおりです。

#pet-search-left { width: 270px; float: left; height: 200px; padding: 3px;}
#pet-search-right { width: 270px; float: right; height: 200px; padding: 3px;}

小さいサイズ:

#pet-search-left { width: 100%; height: 200px;}
#pet-search-right { width: 100%; height: 200px;}

何が起こっている？

編集: Android Chrome でも間違っています。