Long text overflow to next component in HTML/CSS

Question

When there is max-width set, a long sentence will be wrapped into multiple lines when the max width was hit. However, somehow the wrapped lines will overlap with the component below. For example,

body {
  font-family: sans-serif;
  font-weight: 300;
  margin: 1em auto;
  max-width: 50em;
}

div.main {
  margin: auto;
  width: 75%;
  height: 75%;
  box-shadow: grey 0px 0px 5px;
}

div.inner {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

p.footer {
  position: relative;
  text-align: right;
  bottom: 0px;
  width: 100%;
  font-size: 8pt;
}

div.right {
  display: block;
  float: right;
}

div.left {
  display: block;
  text-align: left;
  margin-right: 0px;
  max-width: 75%;
  float: left;
}

<div id="main" class="main">
  <div class="inner">
    <div class="left">left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left </div>
    <div class="right">right</div>
    <br>
    <br>
    <p class="footer"> test content</p>
  </div>
</div>

will generate . However, after reducing the page width, it will be something like , where the overflowed left component collapsed with the footer (and maybe inner). Is there a way I could fix this? Thanks!

[Someone suggested clearfix but I have no idea how that works]