Content overlapping div

问题

I'm having issues with overlapping contents. When I try this code for the HTML the text within content_left overlaps the entire area i want it to contain. When I change height to auto, it does not solve the problem.. Contents overlap to the right and the bottom is cut off.

#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>

Example jsfiddle Example

回答1:

its because there is no space in string(word) try

 .content_left{overflow:hidden;}

and i dont think any valid string(word) as long as yours

回答2:

Seeing the full fiddle, the comments i can make are

remove the height:700px; from the #wrapper
add overflow:hidden on the #wrapper
add word-wrap: break-word; on the .content_left
(this will enable word-breaking since your text is too long to fit in a single line..)

The result can bee seen at http://jsfiddle.net/gaby/L6acE/1/

Support for this feature can be seen at http://caniuse.com/#search=word-wrap

来源：https://stackoverflow.com/questions/13432241/content-overlapping-div

标签

css

html

overlapping