'Bootstrap absolute positioning creating overlapping layout
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" class="site-content">
<section class="py-5 main-block">
<div class="container">
<div class="row">
<div class="col-lg">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/6b59b3/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<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 class="col-lg-12 main-wrapper">
<div class="main-box">
<div class="image-container"><img src="https://dummyimage.com/440x440/76b359/fff"></div>
<div class="text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<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>Solution 1:[1]
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" class="site-content">
<section class="container py-5 main-block">
<div class="row">
<div class="col">
<h2 class="text-blue-dark mb-5">Cursus euismod quis</h2>
</div>
</div>
<div class="row main-wrapper">
<div class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/6b59b3/fff">
</div>
</div>
<div class="col-8 text-container">
<h5 class="font-weight-bold">Lorem ipsum dolor sit amet</h5>
<div class="blurb mb-2">
<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 class="row main-wrapper">
<div class="col-8 text-container">
<h5 class="font-weight-bold">Sit amet aliquam</h5>
<div class="blurb mb-2">
<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 class="col-4">
<div class="image-container">
<img class="img-fluid" src="https://dummyimage.com/440x440/76b359/fff">
</div>
</div>
</div>
</section>
</main>
</body>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |