画像を横に並べられない原因は何でしょうか？

• 3枚目の構文が間違っています。（<img></div>になっています。）
• 「図」と「図の説明」ならばより適したタグがあります。

• 単に画像を並べるだけならばfloatよりflexをおすすめします。

floatもflexも共通ですが、アイテム（今回の場合は画像）のサイズに依存します。（※ご自身も画像サイズが原因だと推測されるのならばそのサイズを書いていただけると回答者にとってありがたいです。）

float:leftの場合は、その名前のとおり「浮かせて左に寄せて」ので、画像幅が画面幅（実際は親要素の幅）の1/2以上あれば2枚目は“それ以上左に寄せる”ことができないので次の行（下）に移ります。

通常は<img>タグについてはcssでwidthか、imgタグのwidth属性で幅を指定するようにしてください。（大体カメラで撮ったような「写真」は画面サイズより大きいので横に並べるならば必須です。）