I am facing a challenge in making a div (overlay) float over 3 other divs. It slightly overlaps the 1st (horsebanner) and 3rd (footer) divs while completely covering the 2nd (midbackground). My goal is to make the 2nd div automatically expand as the floating div grows, maintaining a consistent overlap with the 3rd div.
Below is the HTML code:
<body>
<div id="navigation">
</div>
<div id="main">
<div class="overlay">
</div>
<div class="horsebanner">
</div>
<div class="midbackground">
</div>
<div class="footer">
</div>
</div>
</body>
And here is the CSS code:
#main {
width: auto;
height: 650px;
background-color: #FF6;
margin-top: 0;
}
#main .horsebanner {
width: auto;
height: 150px;
background-color: #F90;
margin-top: 0;
}
#main .midbackground {
width: auto;
height: 450px;
background-color: #CCC;
margin-top: 0;
}
#main .footer {
width: auto;
height: 50px;
background-color: #333;
margin-top: 0;
}
#main .overlay {
width: 300px;
height: 100px;
margin-left:100px;
margin-right:100px;
background-color:#0F0;
position: absolute;
}
Being new to the world of HTML, I would appreciate any guidance on how to achieve this. Essentially, my aim is for the midbackground DIV to expand proportionally to the overlay DIV for consistent overlapping with the third DIV.