Wolltet ihr schon mal eine Art Zeitungsdesign in eure Webseite einbauen? Dieses Block Design kann man mit CSS bekommen. Heute zeige ich euch wie ihr so ein Split Screen erstellen könnt. Damit bleiben die Inhalt eurer Seite immer bei 50% / 50%.

Video

HTML

<div class="container">
      <div class="links">
        <article>
          <h2>Titel Links</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            ab quae in ipsam laborum non sunt deleniti dolore ipsum placeat.
          </p>
        </article>
      </div>
      <div class="rechts">
        <article>
          <h2>Titel Rechts</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
            ab quae in ipsam laborum non sunt deleniti dolore ipsum placeat.
          </p>
        </article>
      </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: #fff;
}

div {
  height: 100%;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
}
/* Pattern styles */
.container {
  display: table;
  width: 100%;
}

.links {
  background-color: #2c79ff;
  position: absolute;
  left: 0px;
  width: 50%;
}

.rechts {
  background-color: #005bf7;
  position: absolute;
  right: 0px;
  width: 50%;
}