css - 内容重叠 div

我遇到了内容重叠的问题。当我为 HTML 尝试此代码时， content_left 中的文本与我希望它包含的整个区域重叠。当我将高度更改为自动时，它并没有解决问题.. 内容向右重叠，底部被切断。

#wrapper {
  height: 1500px;
  margin: 20px auto auto auto;
  padding: 0;
  background: url(wrapper.png);
}

.content_left {
  float: left;
  width: 600px;
  padding: 20px 0 0 30px;
  margin-left: -300px;
  position: relative;
  height: auto;
}

<div id="wrapper">

  <div id="header">

    <div id="logo">
    </div>

    <div id="header_right">
    </div>
  </div>
  <div class="content_left">
    hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
    hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
    hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
  </div>

  <div class="content_right">
  </div>

  <div class="footer">
    Footer goes here
  </div>
</div>

示例 jsfiddle Example

最佳答案

看到完整的 fiddle ，我可以发表的评论是

从 height:700px;

中删除 #wrapper

在 overflow:hidden

上添加 #wrapper

在 word-wrap: break-word; 上添加 .content_left(这将启用断字，因为您的文本太长而无法放在一行中。)

结果可以在 http://jsfiddle.net/gaby/L6acE/1/ 看到

可以在 http://caniuse.com/#search=word-wrap 上看到对此功能的支持

关于css - 内容重叠 div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13432241/