Pieter Pieter - 2 months ago 5
CSS Question

text is stacks on top of itself

enter image description hereenter image description here

I have a weird problem inside my introtext div I have some

p
tags with text inside of that I have some spans to give certain words a highlighted color.

However now my text is literally on top of each other anybody has an idea what is causing this?



.wrapper {
width: 100%;
position: relative;
float: left;
height: auto;
}
.bluetxt {
color: #0084FF;
float: left;
position: relative;
float: left;
}
#introheader {
position: relative;
float: left;
font-family: alternate;
font-size: 1.0vw;
margin-top: 5%;
font-weight: 800;
}
#introtxt {
font-family: alternate;
font-size: 0.7vw;
margin-top: 4%;
position: relative;
float: left;
width: 80%;
text-align: left;
}

<div class="wrapper">
<p id="introheader"><span class="bluetxt">LEO CLUB DE 4 AMBACHTEN</span>
</p>
<p id="introtxt"><span class="bluetxt">Leo club de 4 ambachten</span> is een servicevereniging of serviceclub voor enthousiaste jongvolwassenen (18-33) uit de regio Gent-Zelzate (BE) en Zeeuws-Vlaanderen (NL). De leden organiseren <span class="bluetxt">fundraisers</span> en
ondersteunen met de opbrengst daarvan <span class="bluetxt">sociale projecten</span>. Op die manier krijgen de leden de kans om zichzelf te ontplooien en belangrijke vaardigheden te ontwikkelen.
</p>
</div>




Answer

Your floating and positioning is not necessary here (at least in the context of your given code). Remove the loat: left; and position: relative; and the p tags will behave as normal.

To make the p tags not overlap anymore, specify a line height, e.g. line-height: 12pt;. Maybe they're inheriting a line-height:0 from one of the parents.

Sidenote: A font-size in vw is very unusual. Better provide it as px or pt and use media queries to make the font-size responsive.

.wrapper {
  width: 100%;
  height: auto;
}
.bluetxt {
  color: #0084FF;
}
#introheader {
  font-family: alternate;
  font-size: 12pt;
  margin-top: 5%;
  font-weight: 800;
}
#introtxt {
  font-family: alternate;
  font-size: 10pt;
  margin-top: 4%;
  width: 80%;
  text-align: left;
}
<div class="wrapper">
  <p id="introheader"><span class="bluetxt">LEO CLUB DE 4 AMBACHTEN</span>
  </p>
  <p id="introtxt"><span class="bluetxt">Leo club de 4 ambachten</span> is een servicevereniging of serviceclub voor enthousiaste jongvolwassenen (18-33) uit de regio Gent-Zelzate (BE) en Zeeuws-Vlaanderen (NL). De leden organiseren <span class="bluetxt">fundraisers</span> en
    ondersteunen met de opbrengst daarvan <span class="bluetxt">sociale projecten</span>. Op die manier krijgen de leden de kans om zichzelf te ontplooien en belangrijke vaardigheden te ontwikkelen.
  </p>
</div>

Comments