I've encountered an issue with my code where the footer appears to be stuck at the bottom of the h2_c div instead of the bottom of the .content div where it should be. I have tried using positioning but it hasn't resolved the problem.
Thank You.
.header {
background: #a7a7a7;
min-height: 700px;
position: relative;
}
.content {
width: 940px;
margin: 70px auto 0 auto;
}
.h2_c {
color: #333;
font-weight: bold;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
}
.one {
float: left;
width: 300px;
height: 400px;
background: green;
position: relative;
}
.info {
position: absolute;
bottom: 0;
width: 100%;
}
.two {
float: left;
width: 300px;
height: 400px;
background: green;
margin-left: 20px;
position: relative;
}
.three {
float: right;
width: 300px;
height: 400px;
background: green;
position: relative;
}
.h2 {
color: #fff;
font-size: 28px;
padding: 20px 20px 10px 20px;
margin: 0;
}
.p {
color: #ccc;
margin: 0;
padding: 0px 20px 10px 20px;
font-size: 16px;
}
.span {
color: #fff;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 3px 10px 3px 10px;
font-size: 11px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
background: blue;
margin: 20px;
}
.footer {
border-top: 4px solid orange;
}<div class="header"></div>
<div class="content">
<h2 class="h2_c">Content</h2>
<div class="one">
<div class="info">
<span class="span">Text 1</span>
<h2 class="h2">Some really cool text</h2>
<p class="p">Text text text text text text text text text text text text text text text text text text.</p>
</div>
</div>
<div class="two">
<div class="info">
<span class="span">Text 2</span>
<h2 class="h2">Some really cool text</h2>
<p class="p">Text text text text text text text text text text text text text text text text text text.</p>
</div>
</div>
<div class="three">
<div class="info">
<span class="span">Text 3</span>
<h2 class="h2">Some really cool text</h2>
<p class="p">Text text text text text text text text text text text text text text text text text text.</p>
</div>
</div>
</div>
<div class="footer"></div>