How can i make this page scroll horizontally instead of verticaly?

Question

I made these three sections, and i want them each to be stretched through the whole screen, i managed to do that with

width

, but i don't know how to set the

height

to be 100% of the screen (sorry if its easy, i am noob), and the main thing i want them to scroll horizontally, not vertically as usual. Can my code be fixed?

Take a look at the snippet bellow:

body {

  margin: 0;

  padding: 0;

}

.element {

  width: 100%;

  background-color: #333;

  height: 100px;

  margin: 0;

  padding: 0;

}

.element2 {

  width: 100%;

  background-color: #000;

  height: 100px;

  margin: 0;

  padding: 0;

}

.element3 {

  width: 100%;

  background-color: #111;

  height: 100px;

  margin: 0;

  padding: 0;

}

.element p {

  padding: 0;

  font-family: "Bebas Neue";

  font-size: 50px;

  color: #ffffff;

  position: absolute;

}

.element2 p {

  padding: 0;

  font-family: "Bebas Neue";

  font-size: 50px;

  color: #ffffff;

  position: absolute;

}

.element3 p {

  padding: 0;

  font-family: "Bebas Neue";

  font-size: 50px;

  color: yellow;

  position: absolute;

}

<div class="element">

  <p>Element #1</p>

</div>



<div class="element2">

  <p>Element #2</p>

</div>



<div class="element3">

  <p>Element #3</p>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Try using flexbox, and set both html and body to height: 100%;

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.element {
  flex: 0 0 100%;
  background: #333;
  color: white;
}
.element2 {
  background: #666;
}

<div class="element element1">
  <p>Element #1</p>
</div>
<div class="element element2">
  <p>Element #2</p>
</div>
<div class="element element3">
  <p>Element #3</p>
</div>

How can i make this page scroll horizontally instead of verticaly?

Sign up