content overflowing body in html/css

Question

i wrote a sample page while studying css. But i found 2 of my divs overflowing body content and footer is above that div.

body {
  background-color: white;
}
#div1 {
  margin: 50px;
  text-align: justify;
  width: 40%;
  position: absolute;
  left: 150px;
  top: 400px;
}
#div2 {
  margin: 50px;
  width: 35%;
  position: absolute;
  left: 800px;
  top: 400px;
}
#div3 {
  position: relative;
  width: 100%;
  height: 200px;
  top: 500px;
  background-color: black;
  color: white;
}
footer {
  background-color: black;
  color: white;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

<div id="div1">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
  </p>
  <h1 id="head2"><b>What I can help you with:</b></h1>
  <p>
If you’re a company or an agency that cares about creating great user experiences and are looking for someone to help you build a fast, accessible and standards-compliant responsive web site or application, I can help
  </p>
</div>
<div id="div2">
  <h3>TESTIMONIAL</h3>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
  </p>
</div>
<footer>
  <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip</div>
</footer>

The problem is that div2 and div3 is overflowing beyond footer and the whole page becomes ugly. The contents of those divs are outside body when I check via inspect element in chrome.

Answer 1

You are using position:absolute everywhere, and you don't need it. Instead use inline-block for example.

body {
  background-color: white;
  margin: 0;
}
.div {
  margin: 5%;
  display: inline-block;
  vertical-align: top
}
.w40 {
  text-align: justify;
  width: 40%
}
.w35 {
  width: 35%
}
 {} footer {
  background-color: black;
  color: white;
  width: 100%;
}

<div class="div w40">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
  </p>
  <h1 id="head2"><strong>What I can help you with:</strong></h1>
  <ul>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
    <li>Lorem Ipsum is simply dummy text of th</li>
  </ul>
</div>
<div class="div w35">
  <h3>TESTIMONIAL</h3>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
  </p>
</div>
<footer>
  <div id="left">Lorem Ipsum is simply dummy text of the printing and typesetting
  </div>
</footer>