How to position two sections one under another correctly?

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.

3 answers

  • answered 2019-09-15 22:18 Maryam HDR

    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.

  • answered 2019-09-15 22:23 EGC

    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 and 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/

  • answered 2019-09-15 22:29 Rounin

    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>