Q24 下のような配置 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q23</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="kumo1"><img src="img/kumo.jpg" width="199px" height="158px"> </div>
<p id="p1">段落１のテキストです。段落１のテキストです。段落１のテキストです。</p>
<p id="p2">段落２のテキストです。段落２のテキストです。段落２のテキストです。
段落２のテキストです。段落２のテキストです。段落２のテキストです。段落２のテキストです。</p>
<p id="p3">段落３のテキストです。段落３のテキストです。段落３のテキストです。</p3>
<div id="kumo2"><img src="img/kumo.jpg" width="199px" height="158px"></div>
<p id="p4">段落４のテキストです。段落４のテキストです。段落４のテキストです。
段落４のテキストです。段落４のテキストです。段落４のテキストです。段落４のテキストです。</p4>
</div> <!-- /#wrapper -->
</body>
</html>




@charset="UTF-8";

/*reset*/
body,ul,li,a {
  margin: 0;
  padding: 0;
}

body {
  font-family: 
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  sans-serif;
}

#wrapper {
  font-size: 16px;
  line-height: 1.4;
  width: 380px;
  margin: 10px auto;
}
#kumo1 {
  float: left;
}
#p2 {
  clear: both;
}
#p3 {
  float: left;
  width: 180px;
  margin-top: -1px;
}
#p4 {
  margin-top: -5px;
}