Html 防止div元素中的图像和动态文本重叠

我有一个后退按钮图像作为另一个按钮中的div元素。程序标题中的文本及其宽度都在动态变化。我想防止后退按钮图像与文本重叠，但未成功

到目前为止，我已经尝试将图像向左或向右浮动，将两种样式都设置为显示：内联块、更改边距和使用而不是。如果我将program_title的位置更改为relative，这会以某种方式干扰元素的居中。我想我遗漏了一些简单的东西。有没有解决这个问题的建议

---

在返回中不应保持绝对位置，因为由于此特定属性，“返回”按钮具有绝对位置，而不考虑其上或其周围的任何其他元素。这看起来像是其他元素在你的书名后面的按钮上重叠，但实际上如果你向下滚动页面I.e。如果你的页面足够大，可以向下滚动，你会注意到后退按钮的位置没有改变。因此，将其更改为相对或删除样式中的position属性。

那里有很多不需要的代码！如果问题出在图像上，那么一个简单的浮点就可以了。父对象的div位置是否为绝对位置并不重要！我拉小提琴

以及您需要的所有CSS。当然，其中有些是为了时尚，你可以把它变老

#map {
position:absolute;
left:25%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
#go-back {
  content:url('http://img.freepik.com/free-icon/back-button_318-69320.jpg?size=338&ext=jpg');
  float: left;
  display:inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#program_title {
  line-height: 25px;
}

您需要删除位置：绝对；从返回并改为使用显示：内联块；或浮动：左

#map {
position:absolute;
left:25%;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}
#go-back {
  content:url('http://img.freepik.com/free-icon/back-button_318-69320.jpg?size=338&ext=jpg');
  float: left;
  display:inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
#program_title {
  line-height: 25px;
}

#go-back {
  content:url('https://cdn2.iconfinder.com/data/icons/arrows-and-universal-actions-icon-set/256/left_circle-128.png');
  color: #fff;
  border-radius: 5px;
  height: 20px;
  width: 20px;
  opacity: 0.9;
  display:inline-block; /* Or float:left */
}