How to position two sections one under another correctly?

Question

I'm trying to add 2 sections, respectively with classes "intro" and "content" one under another so that whenever I resize the window, the section resizes together with text (i managed this one). But now that I added second section, when resizing windows the second section stays in the same position, but it should move down a bit as the first section's height gets bigger. I reckon it has something to do with "top" property for the second section, but can't seem to figure it out on my own.

Link to jsfiddle: https://jsfiddle.net/raichibald/gpjfL5mk/10/

HTML code:

<section class="intro">
      <div class="container">
        <h1 class="section-heading">
          Lorem ipsum dolor sit amet.
        </h1>
        <p>text</p>
      </div>
    </section>

    <section class="content">
      <div class="container">
        <div>
          <h1 class="section-heading">
            Lorem ipsum dolor sit amet.
          </h1>
          <p>text</p>
        </div>
      </div>
    </section>

CSS code:

.intro {
  min-height: 30vh;
  max-height: auto;
  position: absolute;
  display: flex;
  top: 10vh;
}
.intro .container {
  background: red;
}
.container {
  width: 100%;
}
.section-heading {
  text-align: center;
  margin: 4vh auto 0 auto;
  font-weight: 500;
  letter-spacing: 1px;
}
.content {
  min-height: 30vh;
  position: absolute;
  display: flex;
  top: 40vh;
}
.content .container {
  background: #b3bfb8;
}

I expect that second section would move down automatically from current top position as the first section is getting bigger (even if I add 5000 lines of text), but something is off.

Answer 1

Put your sections in a parent div and set the .div class for the parent div just like this:

.div {
   display: flex;
   flex-direction: column 
}

By the way, you should remove absolute position of the sections.

Answer 2

So, I've essentially deleted your css, but I have a working solution which acts quite sophisticated, with less code.

I would suggest having a look & substituting any of your styling into this where necessary?

HTML

<section class="intro">
  <div class="container">
    <h1 class="section-heading">
      Lorem ipsum dolor sit amet.
    </h1>
    <p>text</p>
  </div>

<section class="content">
  <div class="container">
    <div>
      <h1 class="section-heading">
        Lorem ipsum dolor sit amet.
      </h1>
      <p>text</p>
    </div>
  </div>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

section {
  width: 100%;
  height: auto;
  padding: 40px;
}

.intro {
   background-color: red;
}

.content {
  background-color: gray;
}

Let me know if you have any questions or would like me to provide any more examples, I'd be more than happy to help!

Have a look at the JS Fiddle: https://jsfiddle.net/hzLw0db3/

Answer 3

If I understand correctly what you're trying to achieve, you don't need display: flex or position: absolute or top declarations.

All you need is two <sections> , each with display: block .

Working Example:

 .section { display: block; padding: 12px; } .intro { background: red; font-family: "Montserrat", sans-serif; min-height: 30vh; } .content { font-family: "Montserrat", sans-serif; min-height: 30vh; background: #b3bfb8; } .section-heading { text-align: center; margin: 4vh auto 0 auto; font-weight: 500; letter-spacing: 1px; } 

 <section class="intro section"> <h2 class="section-heading">Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, ullam id? Impedit commodi amet eos officiis vero, culpa quibusdam vel et quasi ullam harum dolorum tempore praesentium doloribus!</p> <p>Cupiditate incidunt cum perferendis aliquid earum laborum molestiae minima totam a ad sequi, numquam culpa, tempore unde! Minus repudiandae consequatur saepe beatae.</p> </section> <section class="content section"> <h2 class="section-heading">Lorem ipsum dolor sit amet.</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae, ullam id? Impedit commodi amet eos officiis vero, culpa quibusdam vel et quasi ullam harum dolorum tempore praesentium doloribus!</p> <p>Cupiditate incidunt cum perferendis aliquid earum laborum molestiae minima totam a ad sequi, numquam culpa, tempore unde! Minus repudiandae consequatur saepe beatae.</p> </section>