You got very close. Remember that the sizes with % are relative to the parent of the element. In your example, the class wrapper_child
is 400%, so far so good, but the definition of the daughter class tab
, .wrapper_child > .tab
, indicates that each div will have the size of 100%, ie the same size as the parent, which is with 400% of the screen.
To solve, it’s basically split: 100% / 4 = 25%
This already settles the size. Just need to hit now leave the divs
side by side, instead of one on top of the other (you can’t see because there is no vertical scroll), and this you can add in tab
the float: left;
.
Look how it looks. I just changed the colors to be softer:
.wrapper {
height: 100vh;
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
}
.wrapper_child{
width: 400%;
height: inherit;
}
.wrapper_child > .tab {
float:left;
width: 25%;
height: 100%;
text-align: center;
}
#home {
background-color: rgba(255, 255, 0, 0.2);/*yellow;*/
}
#gallery {
background-color: rgba(0, 255, 0, 0.2);/*green;*/
}
#about {
background-color: rgba(0, 0, 255, 0.2);/*blue;*/
}
#contacts {
background-color: rgba(255, 0, 0, 0.2);/*red;*/
}
<div class="wrapper">
<div class="wrapper_child">
<div id="home" class="tab">
<h3 class="text-center align-middle">Home</h3>
</div>
<div id="gallery" class="tab">
<h3 class="text-center align-middle">Gallery</h3>
</div>
<div id="about" class="tab">
<h3 class="text-center align-middle">About us</h3>
</div>
<div id="contacts" class="tab">
<h3 class="text-center align-middle">Contacts</h3>
</div>
</div>
</div>
@Brenocosta rejected your edition because you changed the linguistic characteristics of the author, who is from Portugal and this type of edition is not valid on the site. I recommend reading of this topic
– user28595