How to wrap text around image in div?

I have problem with my composition of the webpage. Next div shows me my box with text and image, but text doesn't wrap the image. How can I solve that?

#boxx {
  padding: 20px 20px 20px 20px;
  position: fixed;
  left: 30%;
  border: 2px solid black;
  font: 2em Calibri;
  width: 500px;
  height: 1000px;
}

img {
  position: fixed;
  left: 30%;
  display: block;
  margin: 7px 7px 7px 7px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Чехов</title>
  <link rel="stylesheet" href="design.css" />
</head>

<body>
  <h2 style="text-align: center">Антон Павлович Чехов</h2>
  <div id="boxx">Антон Павлович Чехов (17 [29] Січень 1860 — 2 [15] липня 1904) — російський письменник, загальновизнаний класик світової літератури. За професією лікар.</div>

  <img src="1.jpg" alt="Chehov">
</body>

</html>

Solution

for one you need to have it in the same container as your text (#boxx). You can't use position: fixed. fixed and absolute positions remove the element from the flow of the document which means they will not adhere to the other elements around them. You can set the img to float:left at that point:

HTML

<h2 style="text-align: center">Антон Павлович Чехов</h2>
<div id="boxx">
    <img src="http://www.placecage.com/100/100" alt="Chehov">
    Антон Павлович Чехов (17 [29] Січень 1860 — 2 [15] липня 1904) — російський письменник, загальновизнаний класик світової літератури. За професією лікар.
</div>

CSS

#boxx{
  padding: 20px 20px 20px 20px;
  position: fixed;
  left: 30%;
  border: 2px solid black;
  font: 2em Calibri;
  width:500px;
  height: 1000px;
}

img{ 
  float: left;
  vertical-align: top;
  margin: 7px 7px 7px 7px; 
}

FIDDLE