I am facing an issue where the four boxes I created are overlapping, despite being set to a height of 50vh and a width of 50vw. How can I resolve this problem and prevent them from overlapping?
https://i.sstatic.net/yRXv1.png
https://i.sstatic.net/4hra6.png
HTML (React):
<div className={styles['policyContainer']}>
<div className={styles["foreignPoliciesContainer"]}></div>
<div className={styles["taxPoliciesContainer"]}></div>
<div className={styles["lawOrderPoliciesContainer"]}></div>
<div className={styles["econTransPoliciesContainer"]}></div>
</div>
CSS (Module):
.policyContainer {
position: absolute;
top: 0;
z-index: -99;
height: 100vh;
width: 100vw;
background-color: #fff;
transition: all 0.2s ease-in-out;
}
.foreignPoliciesContainer {
clear: both;
position: absolute;
top: 0;
left: 0;
z-index: -99;
height: 50%;
width: 50%;
border: 5px solid #000;
}
.taxPoliciesContainer {
clear: both;
position: absolute;
top: 0;
right: 0;
z-index: -99;
height: 50%;
width: 50%;
border: 5px solid #000;
}
.lawOrderPoliciesContainer {
clear: both;
position: absolute;
bottom: 0;
left: 0;
z-index: -99;
height: 50%;
width: 50%;
border: 5px solid #000;
}
.econTransPoliciesContainer {
clear: both;
position: absolute;
bottom: 0;
right: 0;
z-index: -99;
height: 50%;
width: 50%;
border: 5px solid #000;
}
I attempted setting the height and width of all four containers to 50%.