Having some trouble with my portfolio page. I've got a section set up with nested divs, but when I try to adjust the position of the divs, they end up on top of each other. Can anyone offer some guidance?
#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>