avoid divs from going on top of each other - html

Question

I'm trying to make a portfolio page. I've created a section with divs nested inside. The first two on the top of the section were set to relative and they work. I've tried to set the rest to relative and they show on top of the first two divs. Help!
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img{
float: left;
width: 100%;
margin-right: 10px;
position: absolute;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img{
float: left;
width: 100%;
position: absolute;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {
}
#playlist p {
}
<section id="portfolio">
<div id="blog">
<img src="assets/images/icon1.jpg">
<p>Blog</p>
</div>
<div id="hangman">
<img src="assets/images/icon2.jpg">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="assets/images/icon3.jpg">
<p>Playlist</p>
</div>
<div id="maps">
<img src="assets/images/icon4.jpg">
<p>Map Page</p>
</div>
<div id="pets">
<img src="assets/images/icon5.jpg">
<p>Pets</p>
</div>
</section>

Answer 1

The positon:absolute on your img tags in blog and hangman divs was causing this problem. Postion:absolute element do not pick height so thats why everything was overlapping.
Here is your updated code:
#portfolio {
width: 650px;
background-color: white;
margin-left: 75px;
margin-top: 120px;
margin-right: 40px;
margin-bottom: 200px;
padding: 15px;
float: left;
border: 1px solid #dddddd;
overflow: auto;
clear: both;
}
#blog {
position: relative;
float: left;
width: 40%;
}
#blog img {
float: left;
width: 100%;
margin-right: 10px;
}
#blog p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#hangman {
position: relative;
float: right;
width: 40%;
}
#hangman img {
float: left;
width: 100%;
}
#hangman p {
margin: 0;
position: absolute;
top: 125px;
color: white;
background-color: #41AAA5;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
text-align: center;
font-size: 20px;
}
#playlist {
position: relative;
float: left;
width: 40%;
}
#playlist img {}
#playlist p {}
<section id="portfolio">
<div id="blog">
<img src="https://dummyimage.com/600x400/000/fff&text=blog">
<p>Blog</p>
</div>
<div id="hangman">
<img src="https://dummyimage.com/600x400/f00/fff&text=hangman">
<p>Hangman Game</p>
</div>
<div id="playlist">
<img src="https://dummyimage.com/600x400/0f0/fff&text=playlist">
<p>Playlist</p>
</div>
<div id="maps">
<img src="https://dummyimage.com/600x400/00f/fff&text=maps">
<p>Map Page</p>
</div>
<div id="pets">
<img src="https://dummyimage.com/600x400/ff0/fff&text=pets">
<p>Pets</p>
</div>
</section>