CODEWITHSUNDEEP
htmlcsswebformsflexbox
Bmils
Bmils

Reputation: 119

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

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: results of code

Upvotes: 1

Views: 7763

Answers (3)

Shashidhar Reddy
Shashidhar Reddy

Reputation: 305

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>

Upvotes: 0

Valentin Duboscq
Valentin Duboscq

Reputation: 978

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>

Upvotes: 5

Shaul Vainblat
Shaul Vainblat

Reputation: 21

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

Upvotes: 0

Related Questions