CSS one pager layout

Question

I am struggeling with my basic layout for a one pager.

Here is my code:

section {
  position: relative;
  height: 100vh;
}

.section-single>.arrow {
  position: absolute;
  left: 50%;
  bottom: 10%;
}

.section-double>.content-left {
  width: 50%;
  float: left;
  background: gray;
}

.section-double>.content-right {
  width: 50%;
  float: left;
  background: black;
}

#section1 {
  background: green;
}

#section2 {
  background: red;
}

#section3 {
  background: yellow;
}

<section class="section-single" id="section1">
  <iframe src="https://www.youtube.com/watch?..."></iframe>
  <a href="#section2"><span class="arrow">section 2</span></a>
</section>
<section class="section-double" id="section2">
  <div class="content-left" id="div1">
  </div>
  <div class="content-right" id="div2">
</section>
<section class="section-double" id="section3">
  <div class="content-left" id="div3">
  </div>
  <div class="content-right" id="div4">
</section>

Here is how it should look like:

As you see in the css, each section should have the full screen size available and the divs should have both 50% of the page. However, the divs positioning is not working as expected (checked by the background propertie in .section-double > .content-left and .section-double > .content-right.

Can you help me?

Answer 1

You can use flexbox for this layout:

body {
  margin:0;
}
.container {
  display:flex;          /* set the container to flex */
  flex-wrap:wrap;        /* allow children to wrap */
  flex-direction:row;    /* line up children in a row - default value not needed */
}
.container > div {
  min-height:100vh;        /* moved as per comments below */
  border:1px solid black;
  box-sizing:border-box;   /* demo borders only */
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

<div class="container">
  <div class="full-width">
    section one
  </div>
  <div class="half-width">
    div 1
  </div>
  <div class="half-width">
    div 2
  </div>
  <div class="half-width">
    div 3
  </div>
  <div class="half-width">
    div 4
  </div>
</div>

Answer 2

One thing, you have unclosed tags in your html.

<section class="section-single" id="section1">
  <iframe src="https://www.youtube.com/watch?..."></iframe>
  <a href="#section2"><span class="arrow">section 2</span></a>
</section>
<section class="section-double" id="section2">
 <div class="content-left" id="div1">
  div 1 section 2
 </div>
 <div class="content-right" id="div2">
  div 2 section 2
 </div>
</section>
<section class="section-double" id="section3">
 <div class="content-left" id="div3">
  div 1 section 3
 </div>
 <div class="content-right" id="div4"> 
  div 2 section 3
 </div>
</section>