How to split web page screen horizontally into 3 equal pieces? - html

Question

I am trying to split the screen horizontally into 3 equal pieces so I can place separate images into each piece. I have split the screen somewhat equally, but I am running into some issues with a white space and not being split equally.
Here is what I have:
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:
/* Split the screen into thirds*/
.split {
height: 100%;
width: 33.3333%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: #111;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
.center {
right:auto;
left:auto;
background-color:wheat;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
Image:

Answer 1

You can use flexbox:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 100%;
padding: 5px;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Answer 2

You can use grid :
https://css-tricks.com/snippets/css/complete-guide-grid/
in grid you can divide your grid.
*doesn"t work with older browsers like ie11

Answer 3

First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
<div class="container">
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>