While studying CSS, I created a sample page and encountered an issue where two of my divs were overflowing the content of the body, with the footer appearing above those divs.
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 challenge lies in the fact that div2 and div3 extend beyond the bounds of the footer, resulting in an unattractive layout. Upon inspecting the elements via Chrome's developer tools, I noticed that the contents of these divs are positioned outside the boundaries of the body.