CODEWITHSUNDEEP
css
Thinker
Thinker

Reputation: 5366

CSS arranging two full width divs bellow each other

I have two divs whose css looks like following:

.div-one:before {
  content: "";
  background: url("../../../assets/images/manhattan-min.png") center no-repeat;
  position: fixed;
  width: 100%;
  min-height: 100vh;
}

.div-one {
  width: 100%;
  height: 100vh;
}

.div-five{
  position: relative;
  background-color: brown;
  width: 100%;
  height: 100vh;
}

I basically want to design it as a typical landing page, the div-one is full sized image that occupies entire screen and as user scrolls down he can see another full screen div-five which is more or less where I can show some product details. Right now, with this css :before part renders in such a way that there is horizontal scrollbar.

UPDATE:

.div-two {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div2 0.2s forwards;
  animation: left-to-right-div2 0.2s forwards;
}
.div-three {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}
.div-four {
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: #EEEEEE;
  -webkit-animation: left-to-right-div3 0.2s forwards;
  animation: left-to-right-div3 0.2s forwards;
}

div-two, div-three,div-four basically open with 50% width where the div-one is.

Upvotes: 0

Views: 63

Answers (1)

Neill Herbst
Neill Herbst

Reputation: 2122

You can use the display property:

.div-one:before {
  content: "";
  background: url("../../../assets/images/manhattan-min.png") center no-repeat;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  display: block;
}

.div-one {
  width: 100%;
  height: 100vh;
  display: block;
}

.div-five{
  position: relative;
  background-color: brown;
  width: 100%;
  height: 100vh;
  display: block;
}

This should position all the div elements below each other on the web page

Upvotes: 1

Related Questions