How to make vertical split screens with two divs?

Question

I would like to create split page using html and css, but unfortunately it goes one under another.

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800');

@media (min-width: 500px) {
  .col-sm-6 {
    width: 50%;
  }
}
html, body {
  height: 100%;
  min-height: 18em;
}

.frontend-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-code.png");
}

.uiux-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-post-its.png");
}

.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight:300;
;
}
@media(min-width: 500px) {
  .split-pane {
    padding-top: 2em;
    height: 100%;
  }
}
.split-pane > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}
.split-pane > div .text-content {
  line-height: 1.6em;
  margin-bottom: 1em;
}
.split-pane > div .text-content .big {
  font-size: 2em;
}
.split-pane > div img {
  height: 1.3em;
}
@media (max-width: 500px) {
  .split-pane > div img {
    display:none;
  }
}
.split-pane button, .split-pane a.button {
  font-family: 'Open Sans', sans-serif;
  font-weight:800;
  background: none;
  border: 1px solid white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 15em;
  padding: 0.7em;
  font-size: 0.5em;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: white;
  display: inline-block;
  cursor: pointer;
}
.split-pane button:hover, .split-pane a.button:hover {
  text-decoration: none;
  background-color: white;
  border-color: white;
  cursor: pointer;
}
.uiux-side.split-pane button:hover, .split-pane a.button:hover {
  color: violet;
}
.frontend-side.split-pane button:hover, .split-pane a.button:hover {
  color: blue;
}

#split-pane-or {
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media (max-width: 925px) {
  #split-pane-or {
    top:15%;
  }
}
#split-pane-or > div img {
  height: 2.5em;
}
@media (max-width: 500px) {
  #split-pane-or {
    position: absolute;
    top: 50px;
  }
  #split-pane-or > div img {
    height:2em;
  }
}
@media(min-width: 500px) {
  #split-pane-or {
    font-size: 3em;
  }
}
.big {
  font-size: 2em;
}

#slogan {
  position: absolute;
  width: 100%;
  z-index: 100;
  text-align: center;
  vertical-align: baseline;
  top: 0.5em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4em;
}
@media(min-width: 500px) {
  #slogan {
    top: 5%;
    font-size: 1.8em;
  }
}
#slogan img {
  height: 0.7em;
}
.bold {
  text-transform:uppercase;
}
.big {
  font-weight:800;
}

<head>
<title>Wybierz Swój Maraton! </title>
<link rel ="stylesheet" href="/wybierzmaraton.css" />
</head>
<div class='split-pane col-xs-12 col-sm-6 uiux-side'>
  <div>
    <img src='myContent1.png.png'>
    <div class='text-content'>
      <div class="bold">YOU WANT</div>
      <div class='big'>MARATON MATURZYSTY?</div>
    </div>
    <button>
      KLIKNIJ
    </button>
  </div>
</div>
<div class='split-pane col-xs-12 col-sm-6 frontend-side'>
  <div>
    <img src='myContent.png'>
    <div class='text-content'>
      <div class="bold">YOU WANT</div>
      <div class='big'>this?</div>
    </div>
    <a class='button'>
      KLIKNIJ
    </a>
  </div>
</div>
<div id='split-pane-or'>
  <div>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/bcr-white.png'>
  </div>
</div>

The effect is I have these divs one under another.

How to change it and make it properly? I tried also with custom shape from this link but I get only white space. vertical split-screen custom shape

I got it from this website https://speckyboy.com/snippets-split-screen-layouts/

Kameron · Answer 1 · 2022-01-26T20:34:42.767

It appears you are already using Bootstrap. So in that case, I would suggest using two col-6's to split the page. See below.

img {
  width: 100%;
}

.frontend-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-code.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

.uiux-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-post-its.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
}

.col-6 {
  padding: 0 !important;
}

body {
  overflow-x: hidden;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-6">
      <div class="uiux-side"></div>
    </div>
    <div class="col-6">
      <div class="frontend-side"></div>
    </div>
  </div>
</body>

EDIT ~ I added your actual images you were using as background-images on divs and set the background properties so they display full height. col-6 will give you half-n-half width by default but in order for it to appear that each side is using 50vw you have to add padding: 0 !important; to override bootstraps default padding on col's.

score 0 · Answer 2 · edited Jan 23 '22 at 01:30

By default, your DIVs are "blocks", which means their width is 100% and you can't place two divs one next to the other. The way to fix this is using the CSS FLEX display property, I strongly recommend you to watch a Youtube video because it is too much easier to understand if you actually see how the elements take their placement.

In short, using "display: flex" on an element means that their children's elements are going to try to fit in one or more lines depending on their own widths. There are some other CSS properties that are going to help you to position your divs the way you want. In your case you only want to place two elements on the same row, so an easy solution could be adding a new div that wraps your two existing divs and make it flex, so you are going to see that you are getting your 2 divs in the same row

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800');

@media (min-width: 500px) {
  .col-sm-6 {
    width: 50%;
  }
}
html, body {
  height: 100%;
  min-height: 18em;
}

.frontend-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-code.png");
}

.uiux-side {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/website-post-its.png");
}

.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight:300;
;
}
@media(min-width: 500px) {
  .split-pane {
    padding-top: 2em;
    height: 100%;
  }
}
.split-pane > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}
.split-pane > div .text-content {
  line-height: 1.6em;
  margin-bottom: 1em;
}
.split-pane > div .text-content .big {
  font-size: 2em;
}
.split-pane > div img {
  height: 1.3em;
}
@media (max-width: 500px) {
  .split-pane > div img {
    display:none;
  }
}
.split-pane button, .split-pane a.button {
  font-family: 'Open Sans', sans-serif;
  font-weight:800;
  background: none;
  border: 1px solid white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 15em;
  padding: 0.7em;
  font-size: 0.5em;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: white;
  display: inline-block;
  cursor: pointer;
}
.split-pane button:hover, .split-pane a.button:hover {
  text-decoration: none;
  background-color: white;
  border-color: white;
  cursor: pointer;
}
.uiux-side.split-pane button:hover, .split-pane a.button:hover {
  color: violet;
}
.frontend-side.split-pane button:hover, .split-pane a.button:hover {
  color: blue;
}

#split-pane-or {
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media (max-width: 925px) {
  #split-pane-or {
    top:15%;
  }
}
#split-pane-or > div img {
  height: 2.5em;
}
@media (max-width: 500px) {
  #split-pane-or {
    position: absolute;
    top: 50px;
  }
  #split-pane-or > div img {
    height:2em;
  }
}
@media(min-width: 500px) {
  #split-pane-or {
    font-size: 3em;
  }
}
.big {
  font-size: 2em;
}

#slogan {
  position: absolute;
  width: 100%;
  z-index: 100;
  text-align: center;
  vertical-align: baseline;
  top: 0.5em;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4em;
}
@media(min-width: 500px) {
  #slogan {
    top: 5%;
    font-size: 1.8em;
  }
}
#slogan img {
  height: 0.7em;
}
.bold {
  text-transform:uppercase;
}
.big {
  font-weight:800;
}

.div-flex {
  /* And this is your new CSS Class */
  display: flex
}

<div class='div-flex'> <!-- This is your new DIV -->
  <div class='split-pane col-xs-12 col-sm-6 uiux-side'>
    <div>
      <img src='myContent1.png.png'>
      <div class='text-content'>
        <div class="bold">YOU WANT</div>
        <div class='big'>MARATON MATURZYSTY?</div>
      </div>
      <button>
        KLIKNIJ
      </button>
    </div>
  </div>
  <div class='split-pane col-xs-12 col-sm-6 frontend-side'>
    <div>
      <img src='myContent.png'>
      <div class='text-content'>
        <div class="bold">YOU WANT</div>
        <div class='big'>this?</div>
      </div>
      <a class='button'>
        KLIKNIJ
      </a>
    </div>
  </div>
</div>
<div id='split-pane-or'>
  <div>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/74452/bcr-white.png'>
  </div>
</div>

How to make vertical split screens with two divs?

2 Answers2