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>

Answer 2

This happens because you use position:absolute with top:400px and it goes down below body height (it doesn't even have proper height because there are static elements in there). In your example, if you just remove position:absolute from all elements (divs and footer) it will look just fine. You can use margin-left instead of left for positioning;

Answer 3

I'm not 100% sure what you're attempting, but you're abusing the heck out of position absolute. You really want to be careful how you use it because it takes away from the height and width of the document when you use position absolute. You most likely want to use float: left, but this can be tricky at times too. If you go to mobile this won't behave the same way for example.

CSS takes a lot of time and planning to make sure you do the right things. Check out below and see if the code provided helps out.

I added float: left to #div1, #div2

html{
  height: 100%:
    width: 100%;
}
body{
    background-color: white;
      height: 100%;
      width: 100%;
    }


    #div1{
                margin: 50px;
        text-align: justify;
        width:40%;
      float: left;
    }

    #div2{
                margin: 50px;
                width:35%;
      float: left;
    }


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

To prevent some of the footer messing up, I also added height: 100% and width: 100% to body and html, but this may not be something you want to use. Just test and make sure it acts the way you imagine.

Answer 4

It is because you have positionned them with absolute and there is no more relative parent since you don't have a #div4. Div are blocks by default, if you delete the position attribute on them, they should wrap normally.

You should put the overflow on the body if you want to hide with the whole page.