Keeping height of div when layering divs with relative/absolute positioning - html

Question

I'm trying to layer some divs using relative/absolute positioning. The problem I can't seem to fix is the div below the wrapper div.
Check out this jsfiddle to see what I mean.
Notice the position of the div.more-stuff. I would like that div to display underneath div#wrap.
#wrap {
position: relative;
width: 100%;
}
.node-content {
position: absolute;
top: 30%;
left: 5%;
width: 80%;
background: rgba(236, 240, 241, 1.0);
padding: 5%;
}
.bg-img img {
width: 100%;
height: 300px;
background: rgba(192, 57, 43, 1.0);
}
.more-stuff {
}

Answer 1

I just did little bit changes in CSS as you can see in the code below and the fiddle is :
FIDDLE
CSS
body {
background: rgba(46, 204, 113, 1.0)
}
#main-container {
width: 50%;
margin: 0 auto;
}
#wrap {
position: relative;
width: 100%;
}
.node-content {
position: relative;
top: 0%;
left: 5%;
width: 80%;
background: rgba(236, 240, 241, 1.0);
padding: 5%;
}
.bg-img img {
position:absolute;
width: 100%;
}
.more-stuff{
position: relative;
width: 100%;
background: rgba(192, 57, 43, 1.0);
margin: 0 auto;
}

Answer 2

is this what you need something ??
.more-stuff {
position: absolute;
top: 0;
z-index: -1;
}
https://jsfiddle.net/ymdahi/3qypLpsd/embedded/result/

Answer 3

It seems that the problem was trying to use the relative/absolute positioning in concert to float one div above the other. This seems to be the wrong way - the right way I found on Smashing Mag:
Add position: relative; to the div that I want to position over the cover image div did the trick. Check out the final JSFiddle.
Here's the code snippet to run as well:
body { background: rgba(46, 204, 113,1.0) }
#main-container { width: 80%; max-width: 1200px; margin: 0 auto; }
.cover-photo { max-height: 520px; overflow: hidden; }
.cover-photo img { width: 100%; height: auto; background: rgba(192, 57, 43,1.0); }
.content-region {
position: relative; /* add position: relative to floating region, but do not add position: absolute to wrapping div. */
width: 80%;
padding: 25px;
margin: -215px auto 25px;
background: rgba(236, 240, 241,1.0);
}
.left-col { float: left; width: 30%; }
.right-col { float: right; width: 69%; }
.below-content { padding: 50px; background: #000; color: #fff; }
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
<div id="main-container">
<div class="cover-photo">
<img src="http://static.pexels.com/wp-content/uploads/2014/05/iphone-macbook-air-man-156-825x550.jpg">
</div>
<div class="content-region clearfix">
<div class="left-col">
<h1>The title of the page</h1>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis.</p>
<h2>The title of the page</h2>
<p>Doloremque! Phasellus faucibus! Repellat iure eleifend ullam neque debitis culpa, condimentum et aute voluptatibus odio eiusmod similique tempora facere doloribus itaque. Dictumst neque interdum. Nonummy</p>
</div><!-- left-col -->
<div class="right-col">
<h1>Main content column</h1>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
</div><!-- right-col -->
</div> <!-- content-region -->
<div class="below-content">
<h1>Other things below content</h1>
<p>Porttitor eros nesciunt, fugiat? Cupidatat, enim eligendi! Tempor commodi risus facilisi conubia? Pulvinar deleniti etiam nostrud cras magni bibendum hendrerit dictumst imperdiet blandit possimus porttitor eiusmod lorem feugiat dolor cillum! Ratione mattis, maecenas! Perspiciatis. Lacinia erat condimentum proin hymenaeos quisque? Voluptatibus varius, minima, dolorem! Quasi, class? Rhoncus proin porro hymenaeos hymenaeos commodi sociis repudiandae vel unde voluptates similique voluptatum natus, pariatur non pretium nascetur eaque, fames elementum similique rem voluptate, laboriosam corrupti atque doloribus impedit pulvinar neque nibh dictumst ab! Iusto, proin voluptatibus doloremque, molestie cubilia eaque officiis tincidunt hac cubilia explicabo architecto dignissim officiis, sapien, maiores tristique. Nesciunt, arcu.</p>
</div><!-- below-content -->
</div><!-- #main-container -->