Flex Divs at wrong size whenever another is added

September 13, 2022

I’m attempting to rework the sections of my website, and I got halfway there on what I wanted, except whenever I attempt to add another element, the size breaks for some reason, so what’s supposed to be two large boxes, become two small boxes with overlapping text

How it looks with a single element

How it looks with two elements

Image I edited image to show what I’m trying to accomplish

Someone told me previously that it had something to do with line-height, but messing with line-height didn’t really change much besides the fact the text wasn’t clipping anymore, but the size change was still a problem

I want them all to be a specific size, independently if there’s another element near them or not, if I leave the .headercontainer width at 100%, the single element background stretches through the whole page, which is something I don’t want, here’s what I’m talking about

Here’s my 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 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>

Here’s my style.css file aswell: https://junessai.net/style.css

>Solution :

Change the width of .headercontainer from 46% to 100% in CSS

.headercontainer {
  display: flex;
  height: 5%;
  width: 100%;
  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;
  }

<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>