content gets scrambled

This is because the images are defined as floating to the left.

To solve this, you can add a clear: both to the <h4> elements (it probably won’t hurt to do this in the stylesheet – will there be a situation where you need a title that exists next to a float?).