Наверное, уже на многих сайтах Вы видели обтекание изображения текстом. Подобное размещение материала экономит место и служит для связи иллюстраций с содержимым.
Используем свойство float. В качестве параметра указываем по какой стороне выравниваем изображение. С margin, надеюсь, понятно - чтобы текст не вплотную прилегал к обтекаемому изображению.
Код HTML, CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание</title>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 10px 10px 10px 0; /* Отступы вокруг картинки */
}
.rightimg {
float: right; /* Выравнивание по правому краю */
margin: 10px 0 10px 10px; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<h2>Сталинградская битва</h2>
<p><img src="images/1.jpg" alt="Сталинградская битва" width="120" class="leftimg">
Является крупнейшей сухопутной битвой в ходе Второй мировой войны, которая наряду со сражением на Курской дуге стала переломным моментом в ходе военных действий, после которых немецкие войска окончательно потеряли стратегическую инициативу. Сражение включало в себя попытку вермахта захватить правобережье Волги в районе Сталинграда (современный Волгоград) и сам город, противостояние Красной армии и вермахта в городе и контрнаступление Красной армии (операция <i>Уран</i>), в результате которого 6-я армия и другие силы союзников нацистской Германии внутри и около города были окружены и частью уничтожены, а частью захвачены в плен.</p>
<p>По приблизительным подсчётам, суммарные потери обеих сторон в этом сражении превышают два миллиона человек. Державы Оси потеряли большое количество людей и вооружения и впоследствии не смогли полностью оправиться от поражения.</p>
<h2>Курская битва</h2>
<p><img src="images/2.jpg" width="120" alt="Курская битва" class="rightimg">
В советской и российской историографии принято разделять сражение на 3 части: Курскую стратегическую оборонительную операцию (5 — 23 июля), Орловскую (12 июля — 18 августа) и Белгородско-Харьковскую (3 — 23 августа) стратегические наступательные операции, являющиеся важнейшей частью плана летне-осенней кампании 1943 года. Битва продолжалась 49 дней. Немецкая сторона наступательную часть сражения называла операция <i>Цитадель</i>.</p>
<p>В результате наступления по плану <i>Кутузов</i> была разгромлена орловская группировка немецких войск и ликвидирован занимаемый ею орловский стратегический плацдарм. В ходе операции <i>Полководец Румянцев</i> прекратила своё существование белгородско-харьковская группировка немцев и был ликвидирован этот важнейший плацдарм.[9] Коренной перелом в ходе Великой Отечественной войны, начатый под Сталинградом, был завершен в ходе Курской битвы и сражения за Днепр.</p>
</body>
</html>
Главным тут является использование свойства float (выравнивание). В примере с первым изображение по левому краю, со вторым - по правому.