Bootstrap absolute positioning creating overlapping layout-CodePudding

I am trying to create a layout with absolute positioning elements something like this:

As you can see, the elements are overlapping and not clearing properly. Perhaps there is a very simple fix but I have been unable to figure out how to resolve this.

.main-block .main-wrapper {
  margin-bottom: 4rem;
}

.main-block .main-wrapper:nth-child(odd) .main-box {
  height: 100%;
}

.main-block .main-wrapper:nth-child(odd) .main-box .image-container {
  width: 440px;
}

.main-block .main-wrapper:nth-child(odd) .main-box .text-container {
  background-color: #8EFFFF;
  position: absolute;
  width: 720px;
  top: 3rem;
  z-index: -1;
  right: 15px;
  padding: 4em 5em;
}

.main-block .main-wrapper:nth-child(even) .main-box {
  height: 100%;
}

.main-block .main-wrapper:nth-child(even) .main-box .image-container {
  width: 440px;
  position: absolute;
  right: 15px;
}

.main-block .main-wrapper:nth-child(even) .main-box .text-container {
  background-color: #8EFFFF;
  position: relative;
  width: 720px;
  z-index: -1;
  padding: 4em 5em;
  top: 3rem;
}

<body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <main role="main" id="content" >
    <section >
      <div >
        <div >
          <div >
            <h2 >Cursus euismod quis</h2>
          </div>
        </div>
        <div >
          <div >
            <div >
              <div ><img src="https://dummyimage.com/440x440/6b59b3/fff"></div>
              <div >
                <h5 >Lorem ipsum dolor sit amet</h5>
                <div >
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
                    malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
                    suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
                    at tellus at urna condimentum.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.p>
                </div>
              </div>
            </div>
          </div>
          <div >
            <div >
              <div ><img src="https://dummyimage.com/440x440/76b359/fff"></div>
              <div >
                <h5 >Sit amet aliquam</h5>
                <div >
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  <p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer
                    malesuada nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum
                    suspendisse ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis
                    at tellus at urna condimentum.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</body>

CodePudding user response：

You don't need absolute positioning here. It can be a real pain for complex layouts. I'd use conventional Bootstrap columns and shift things a bit with negative margins.

.main-block .main-wrapper {
  margin-top: 3rem;
}

.main-block .image-container {
  width: calc(100%   2rem);
}

.main-block .main-wrapper:nth-child(odd) .image-container {
  margin-left: -2rem;
}

.main-block .image-container img {
  margin-top: -2rem;
}

.main-block .main-wrapper .text-container {
  background-color: #8EFFFF;
  padding: 4rem 5rem;
  z-index: -1;
}

.main-block .main-wrapper:nth-child(odd) .text-container {
  margin-right: -2rem;
}

.main-block .main-wrapper:nth-child(even) .text-container {
  margin-left: -2rem;
}

<body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

  <main role="main" id="content" >
    <section >
      <div >
        <div >
          <h2 >Cursus euismod quis</h2>
        </div>
      </div>

      <div >
        <div >
          <div >
            <img  src="https://dummyimage.com/440x440/6b59b3/fff">
          </div>
        </div>

        <div >
          <h5 >Lorem ipsum dolor sit amet</h5>

          <div >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
              nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
              ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
              condimentum.
            </p>
          </div>
        </div>
      </div>

      <div >
        <div >
          <h5 >Sit amet aliquam</h5>

          <div >
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Dui id ornare arcu odio ut sem nulla pharetra. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Sit amet aliquam id diam maecenas ultricies mi eget. Pellentesque dignissim enim sit amet. Mollis nunc sed id semper. Integer malesuada
              nunc vel risus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nisi est sit amet facilisis magna etiam tempor orci. Nulla facilisi cras fermentum odio eu. At quis risus sed vulputate odio ut enim blandit. Ipsum suspendisse
              ultrices gravida dictum fusce ut. Facilisi cras fermentum odio eu feugiat. Vestibulum rhoncus est pellentesque elit ullamcorper. Et malesuada fames ac turpis egestas sed tempus urna et. Scelerisque purus semper eget duis at tellus at urna
              condimentum.
            </p>
          </div>
        </div>

        <div >
          <div >
            <img  src="https://dummyimage.com/440x440/76b359/fff">
          </div>
        </div>
      </div>
    </section>
  </main>
</body>