In my code, I have a portfolio-container div with two images and paragraphs inside a list element. The issue I'm facing is that the div is not expanding vertically, causing the images and paragraphs to overlap with the footer below. I've attempted to use display: inline-block on various elements like sections, containers, lists, and images, but none of these solutions have resolved the problem.
/********************************************
PORTFOLIO
********************************************/
#portfolio {
display: inline-block;
}
.portfolio-header {
background-color: #0e2951;
color: #fff;
margin: 1em 0 0 0;
font-size: 1.5em;
padding: 0.1em 0.5em;
}
.portfolio-header.p {
margin: 0;
}
.portfolio-container {
margin: 0 0 1.5em 0;
background-color: red;
height:100px;
background-color: #3d7ddd;
}
.portfolio-container ul {
margin: 0;
list-style: none;
padding: 0;
}
.portfolio-container li {
width: 80%;
margin: 0 auto;
}
.portfolio-container li p {
margin: 0 0 1em 0;
background-color: #b1caf1;
}
.portfolio-image {
max-width: 100%;
margin: 0;
float: left;
}
/********************************************
FOOTER
********************************************/
footer {
border-bottom: solid 0.5em #0e2951;
background-color: #000000;
}
.contact-icon-box {
width: 33.333%;
float: left;
margin-top: 1.5em;
}
.contact-icon-link {
width: 1em;
margin: 0 auto;
text-align: center;
background-color: #3d7ddd;
color: #94b7ec;
border-radius: 150px;
font-size: 5em;
}<section id="porfolio">
<div class="portfolio-header">
<p>Some of my recent work</p>
</div>
<div class="portfolio-container">
<ul>
<li><img class="portfolio-image" src="images/ZIC-screenshot.png" alt="ZIC Homepage"><p>ZIC Homepage</p></li>
<li><img class="portfolio-image" src="images/grafi-screenshot.jpg" alt="Javascript Interactive Graphs"><p>Interactive Js Graphs</p></li>
</ul>
</div>
</section>
<footer>
<div id="contact">
<div class="contact-icon-box">
<div class="contact-icon-link ion-social-facebook">
</div>
</div>
<div class="contact-icon-box">
<div class="contact-icon-link ion-ios-telephone">
</div>
</div>
<div class="contact-icon-box">
<div class="contact-icon-link ion-email">
</div>
</div>
</div>
</footer>