I'm working on a responsive webpage where I have to insert different content with varying heights. The layout includes:
An image at the top with a red gradient overlay.
Below that, a div with a blue background to create a seamless transition between the two sections.
The challenge I'm facing is making the yellow content push down the blue div based on its height. However, the yellow div must remain absolutely positioned to maintain its placement. Is there a way to achieve this using pure CSS, or would I need JavaScript to calculate the height of the blue div?
Here is my JSFiddle link for reference.
HTML
<div class="pr">
<img src="http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detartistchannel2.jpg">
<div id="campaignreleases"></div>
<img id="camlogo" src="http://www.cphrecmedia.dk/musikdk/stage/css/lyttesession.svgz" alt="MusikDK logo">
</div>
<div id="camrel">
<img src="http://www.cphrecmedia.dk/musikdk/stage/demobilleder/detlyttealbum.jpg" alt="ALBUMNAME">
<p>I need to add more content here that should push down the "camrel" div, but it also needs to be positioned just below the logo inside the "pr" div.</p>
</div>
CSS
body {
background: #ddd
}
.pr {
position: relative;
width: 800px
}
.pr img {
width: 100%
}
#campaignreleases {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: -moz-linear-gradient(top, rgba(26, 188, 156, 0.2) 0%, rgba(26, 188, 156, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 188, 156, 0.2)), color-stop(100%, rgba(26, 188, 156, 1)));
}
#camlogo {
position: absolute;
-webkit-transform: translateX(-50%);
left: 50%;
top:15%;
opacity: 1 !important;
max-width: 500px
}
#camrel {
background: #1ABC9C;
text-align: center;
overflow: auto;
}
#camrel img {
width: 250px;
.roundedcorners;
}