For my current project, I am aiming for a three-box style page. However, I am facing an issue where the boxes float over each other when they auto-expand to fit the content inside. This is due to the positioning that I have set for them.
This is the HTML code:
<div class="content">
<h2>Contact me</h2>
<p>--content holder--</p>
</div>
<div class="content-bottom-left">
<p>--content holder--</p>
</div>
<div class="content-bottom-right">
<p>--content holder--</p>
</div>
Here is my CSS:
.content {
background-color: 373737;
top: 15%;
width: 55%;
right: 25%;
position: absolute;
overflow: hidden;
margin-bottom: auto;
}
.content-bottom-left {
background-color: 373737;
width: 27%;
left: 15%;
top: 60%;
position: absolute;
overflow: hidden;
}
.content-bottom-right {
background-color: 373737;
width: 27%;
right: 20%;
top: 60%;
position: absolute;
overflow: hidden;
}
Current Outcome: View Here