I have successfully stacked two sections on top of each other. To achieve this layout, I utilized position:relative on the parent container div and then employed position:absolute on the child divs to align them based on the parent container's top position.
You can view my code snippet below or access it directly on this JSFiddle link:
html,body{height: 100%; width: 100%;}
h1{
font-size: 20px;
font-family: 'Avenir', sans-serif;
color: #212121;
}
h2{
font-size: 18px;
font-family: 'Avenir', sans-serif;
font-weight: lighter;
color: #424242;
}
p{
font-family: 'Avenir', sans-serif;
font-size: 18px;
}
.container{
position: relative;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
#header{
position: absolute;
top: 10px;
max-width: 960px;
line-height: 30px;
}
#header h1{padding-top: 5px;}
#header {max-width: 800px;}
#projects{
position: absolute;
top: 240px;
}<div class = "container">
<section id = "header">
<h1>Name Lastname</h1>
<h2>Description, Description</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.!
</p>
</section>
<section id = "projects">
<p>Another paragraph on projects</p>
</section>
</div>Despite achieving a responsive design for the page, I encountered an issue when reducing the width of the page. The header div (top section) overlaps with the projects div at the bottom, causing readability problems.
Can you suggest how I can maintain consistent spacing between the two divs?