Inexplicable vertical gaps of different sizes in different sizes of viewports between containers

Question

Situation and need

I have a situation in a project where on a website I will need to make a staircase, and there will be text or content on these stairs, and the background of the stairs should be opaque. And there is another element to the right of each staircase (the image is essentially). Therefore, I just use css to float each thing to the left and mention the width so that everything matches 100% as needed.

Problem:

Behind each step of the ladder, a noticeable amount of clearance is visible, which is visible in some viewports and larger / smaller in some sizes of viewports.

Bug fix:

• Different html: - I used to try a different html-layout, in which I simply wrap each step of the stairs and the image in my own shell, and then I float them both inside and not working.

  I am. In this earlier version of html, I tried to give it negative fields (also converting to a scale down to the next and giving negative lower values ​​to the pseudo-element), but they double / overlap and become more noticeable (instead, thick white bands of opaque appear instead )

  II. In the previous html, I tried to use the div divider inside the step stem to fill the gap, but it seems that at each step it appears differently with different gaps and differently thicker / thinner superimposed white stripes

Search for answers:

, , , , , ( ). , . . , , Upvote, ( , )

:

, , . , .

, , , ( ), .

*CODE:*

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.background{
  background:url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
  background-size:cover;
/*   min-height:90vh; */
  width:90vw;
  margin:20px auto;
  padding:20px;
}

.square{
  height:100px;
  width:50%;
  float:left;
}

#square1,
#square3,
#square5,
#square7,
#square9{
  background:rgba(255,255,255,.7);
  
}
#square2,
#square4,
#square6,
#square8,
#square10{
  background:red;
  
}
#square1{
  width:20%;
}
#square2{
  width:80%;
}

#square3{
  width:27%;
}
#square4{
  width:73%;
}

#square5{
  width:34%;
}
#square6{
  width:66%;
}

#square7{
  width:41%;
}
#square8{
  width:59%;
}



/***********
				=clearfix
***********/


.clearfix:before,
.clearfix:after{
	display: table;
	content: ''; 

}
.clearfix:after{
	clear: both; 

}

<div class="background clearfix">
  <section class="square" id="square1"></section>
<section class="square" id="square2"></section>
<section class="square" id="square3"></section>
<section class="square" id="square4"></section>
<section class="square" id="square5"></section>
<section class="square" id="square6"></section>
<section class="square" id="square7"></section>
<section class="square" id="square8"></section>
<section class="square" id="square9"></section>
<section class="square" id="square10"></section>

</div>

Hide result

, , . , html css, ( ). , .

codepen

:

/ . , , .

Answer 1

, , float .

.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.background {
  background: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
  background-size: cover;
  width: 90vw;
  margin: 20px auto;
  padding: 20px;
}

.square {
  position: relative;
  height: 60px;
  background: rgba(255, 255, 255, .7);
  counter-increment: stair;                  /*  "counter", just for demo purpose  */
}
.square::after {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  background: red;
}
.square:nth-child(1)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 80%;
}
.square:nth-child(2)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 70%;
}
.square:nth-child(3)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 60%;
}
.square:nth-child(4)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 50%;
}
.square:nth-child(5)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 40%;
}

<div class="background">
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
</div>

Hide result