New to HTML and need to fix repeated problem on Magento blog

[Susie]

Hello
I am using Magento on Windows 7 to create blogs for work. No one can help me align my images and text correctly.
I want to have an image to the left with text to the right (which I can do) but when I try and repeat this below again, the next bit of text creeps up under the other text. I've tried <section></section>
</br> and <div></div> all with no luck.

I've attached the result I keep getting. I will be soooo grateful for any help as I have no training in coding. Here's part of the code:

section>
<h2><span style="font-size: x-large;"></span><span style="font-size: x-large;"><b style="font-size: x-large;">Slug control:</span></h2>
<p><span style="font-size: x-large;"><img style="float: left; padding: 0px 10px 0px 0px;" title="Ron's Top Tips on Getting Rid of Slugs - Beer Traps!" src="{{media url="wysiwyg/GreatLittleGarden/Blogs/Malvern_Tips_Beer_Traps_flickr_Tony_Austin_google_ok-min.jpg"}}" alt="Beer Traps for Slugs" width="250" height="350" /></span></p>
<p></p>
<p><span style="font-size: x-large;"><b style="font-size: x-large;"><img style="float: right;" src="{{media url="wysiwyg/GreatLittleGarden/Blogs/Top_10_Lists/400px-spacer-min.png"}}" alt="white spacer" width="400" height="400" /><span style="font-size: large;">Beer traps every time. Ron loved them, or his slugs did, and he reckoned he cleared his garden last year after burying yoghurt pots in the soil, filling with beer and letting the slugs die a happy death. One extra point, Ron: leave a centimetre of the yoghurt pot above soil level to help beetles miss the traps. Beetles are good and the slugs won't be bothered by a centimetre of plastic in their pursuit of a beery ending.</span></span></p>
</section>
<p></p>
<section>
<h2><span style="font-size: x-large;"><b style="font-size: x-large;">Compost:</span></h2>
<p><span style="font-size: x-large;"><img style="float: left; padding: 0px 10px 0px 0px;" title="SylvaGrow Compost on our stand at the RHS Malvern Spring Festival" src="{{media url="wysiwyg/GreatLittleGarden/Blogs/malvern-show-compost-min.JPG"}}" alt="sylvagrow-compost-with-John-Innes" width="250" height="250" /></span></p>
<p></p>
<p><span style="font-size: x-large;"><img style="float: right;" src="{{media url="wysiwyg/GreatLittleGarden/Blogs/Top_10_Lists/400px-spacer-min.png"}}" alt="white spacer" width="250" height="250" /><span style="font-size: large;">Jenny loves our Melcourt compost as it is consistent, doesn&rsquo;t contain peat or green waste and helps her grow a fantastic garden. The whole green waste issue cropped up several times at the show and it appears we are all aware of its inherent problems. The main one being the number of lumps and bumps you have to riddle out of most composts before you can use them for sowing seeds. That&rsquo;s not the case with Melcourt - everyone loved the fact we deliver straight to your door and at superb prices. You know what you need to do!</span></span></p>
</section>
<p></p>
<section>

[DaveLembke]

Not sure if this is of any help or not, but the last time I ran into an issue trying to shove over an image that was too close to another I placed an image such as a white rectangle.jpg file the same color as the background to force the formatting with a sledgehammer method. You can also insert a table between images top shove the placement over as another sledgehammer method.

Later I found where you can specify the X,Y coordinates of the images, but then you have some issues with some browsers displaying it differently. I assume your testing this on other browsers to make sure that it behaves such as IE/EDGE, Firefox, Chrome etc. https://html.com/attributes/area-coords/