My goal is to split the screen into three equal sections horizontally so that I can place different images in each section. However, despite my efforts, I am encountering issues with white space and unequal division.
This is my current setup:
HTML:
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
</div>
</div>
<div class="split center">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
</div>
</div>
<div class="split right">
<div class="centered">
<img src="golf_course.jpg" alt="Finished Terrain Golf Course">
</div>
</div>
CSS:
/* Splitting the screen into thirds */
.split {
height: 100%;
width: 33.3333%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Styling for the left section */
.left {
left: 0;
background-color: #111;
}
/* Styling for the right section */
.right {
right: 0;
background-color: red;
}
/* Styling for the center section */
.center {
right: auto;
left: auto;
background-color: wheat;
}
/* Centering the content both horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Additional styling for images within the centered container */
.centered img {
width: 150px;
border-radius: 50%;
}