How to align three divs?

Question

Suppose I have two divs and one :after property:

A Div with a background image at the top of the page (lets call this the banner)
a banner:after feature which inserts an SVG curve at the bottom of the first div image.
A div after the banner:after which is the same colour as the SVG curve (lets call this another div).

How do I align the SVG with another div?

HTML:

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <!-- Responsive and Backward Compatible Meta Design -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Style Sheets -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <style>
    body { background-color: #4D405A; }
    </style>
    <header>
      <div class="container">
        <div class="header-content">
          <div class="col-lg-6">
            <div class="banner-overlay">
              <div class="overlay-wrapper">
                <div class="opaque-wrapper">
                  <h1>Insert Title Text</h1>
                  <p>Paragraph text is really good, i like my paragraph text.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class='somebox'>
      <div class="container"></div>
    </div>
    <div class='alternate-content'></div>
    <div class='more-content'></div>
 </body>
</html>

CSS:

header {
  background: url(https://i.imgur.com/0V96mMN.jpg);
  height: 100vh;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

header:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  background-size: cover;
  height: 12em;
  background-image: url(https://i.imgur.com/bzS5zNh.png);
}

.header-content {
 z-index: 1;
 position: relative;
}

.banner-overlay {
  margin-top:6em;
}

.header-content h1 {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
  color: black;
}

.header-content p {
  font-size: 3em;
  font-weight: bold;
  text-transform: capitalize;
  color: black;
}

.col-lg-6 {
  max-width: none;
  text-align: center;
}

.overlay-wrapper {
  width: 100%;
  height: 30%;
  background-color: rgba(232, 232, 232, 0.25)
}

.opaque-wrapper {
  z-index: 2;
  opacity: 100%;
}

@media (min-width:700px) and (max-width:1500px) {
  .banner-overlay {
    margin-top:12em;

  }
  .header-content h1 {
    font-size: 4em;
  }

  .header-content p {
    font-size: 2.5em;
  }
}

@media (min-width:300px) and (max-width:700px) {
  .banner-overlay {
    margin-top:6.5em;
  }
  .header-content h1 {
    font-size: 4em;
  }

  .header-content p {
    font-size: 2.5em;
  }
}

@media (min-width:0px) and (max-width:300px) {
  .banner-overlay {
    margin-top:6em;
  }
  .header-content h1 {
    font-size: 4em;
  }

  .header-content p {
    font-size: 2em;
  }
}

.somebox {
  height: 75vh;
  width: 100%;
}

.alternate-content {
  background-color:#E0E0E0;
  height: 75vh;
  width: 100%;
}

.more-content {
  height: 75vh;
  width: 100%;
}

Works in code-pen great: https://codepen.io/kraggerz/pen/bGdEKxj

When i run it locally I get:

EDIT: The problem appears to occur when i shrink the screen width (i'm working on responsive design). At Full screen this is not an issue (again this only appears outside codepen)

SOME how you are merging 2 divs try to use margin in `negative` value as @HaldenCollier suggest — Awais, Feb 14 '20 at 13:18
is there any particular object you think there should be negative margin on? (i've tried applying it to the header & the :after property with no avail; the after object just pushes the SVG object down, but the line still appears. — Owen Carter, Feb 14 '20 at 13:27
It seems to me you are looking for something like this pen [Wavy Divider] (https://codepen.io/fabswt/pen/xNbrgp)... From you question I read that you are stuck in your code and want help to unravel/debug it. Better would have been to tell what output you need and ask for help achieving that. This approach widens your seach, yielding more results / examples. Took me less than 2 minutes to find the above pen (just being friendly)... — Rene van der Lende, Feb 14 '20 at 14:07
Got that link from [SO 17202548](https://stackoverflow.com/questions/17202548/wavy-shape-with-css/17202736). Scroll down a bit... — Rene van der Lende, Feb 14 '20 at 14:12

How to align three divs?

0 Answers0