Cara Membagi Layar Menjadi Dua Dengan CSS

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita mempelajari cara membuat layar terpisah (50/50) dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial;
  color: white;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: green;
}

.right {
  right: 0;
  background-color: blue;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="split left">
  <div class="centered">
    <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar woman">
    <h2>Jhon Martin</h2>
    <p>Hi, saya Jhon martin.</p>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar man">
    <h2>Mariane Tyler</h2>
    <p>Hi, aku mariane tyler.</p>
  </div>
</div>
     
</body>
</html>

Cara Membuat Layar Split

Langkah 1) Tambahkan HTML:
Contoh:

<div class="split left">
  <div class="centered">
    <img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" alt="Avatar woman">
    <h2>Jhon Martin</h2>
    <p>Hi, saya Jhon martin, senang bertemu dengan kalian!.</p>
  </div>
</div>

<div class="split right">
  <div class="centered">
    <img src="https://dosenit.com/wp-content/uploads/2021/02/images.png" alt="Avatar man">
    <h2>Mariane Tyler</h2>
    <p>Hi, aku mariane tyler.</p>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Pisahkan layar menjadi dua */
.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Kontrol sisi kiri */
.left {
  left: 0;
  background-color: #111;
}

/* Kontrol sisi kanan */
.right {
  right: 0;
  background-color: red;
}

/* Jika  ingin konten dipusatkan secara horizontal dan vertikal */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Style gambar di dalam container tengah, jika perlu */
.centered img {
  width: 150px;
  border-radius: 50%;
}