I've been working on restructuring the layout of my website, and I've made progress, but whenever I try to add another element, the sizing gets messed up. Instead of two large boxes like I intended, they become two small boxes with text overlapping
View how it looks with a single element
See how it looks with two elements
Here's an edited image showing what I'm trying to achieve
Someone mentioned before that the issue might be related to line-height, but adjusting that didn't fix the problem - the size change still persists.
I want each box to remain a specific size, regardless of other elements nearby. If I set the width of .headercontainer to 100%, the background of the single element extends across the entire page, which isn't the desired outcome. Check out this example
Below is the CSS code for the page:
.headercontainer {
display: flex;
height: 5%;
width: 46%;
margin: auto;
}
div.wrapper {
flex: 1;
border: 1px solid white;
margin: 0.50%;
}
.headerpfp {
float: left;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%
}
.posttext {
text-align: left;
margin-left: 1%;
margin-top: -0.35%;
}
.headtext {
margin-top: 3.00%;
color: lime;
text-align: left;
}
And here is the HTML code:
<div class="headercontainer">
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:left;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
<div class="wrapper" style="background-image:url(../../images/quakebackgrounds/sitebackground03.png);background-size:cover;float:right;">
<a href="../../blog/essays/pages/Early2000sInternet.html">
<img src="../../blog/images/PFPs/JuneSSaiPFP.png" style="border:1px solid white;" class="headerpfp">
<h2 class="headtext">The Early and Mid 2000's Internet</h2></a>
<p style="text-align:left;">Posted August 7, 2022</p>
<p style="text-align:left;">Written By June S. Sai</p>
<br>
<br>
<p class="posttext">There was no bigger joy than sending your</p>
<p class="posttext">friends DooM wads on Skype and playing deathmatch</p>
<p class="posttext">while voicecalling all day long, good times.</p>
</div>
</div>
You can also find my style.css file here: