Resizing multiple divs on resizing window - html

Question

I asked a question some days ago about resizing a div when resizing the browser so that it looks good on desktop and on mobile devices. But now I have an extended problem to the same. I have 2 divs one below the other and the bottom footer div resizes on resizing the browser. The working solution can be found here in my previous post: Resize div on resizing window
But in the problem here, I added another div on top of it. On resizing the browser window, the divs don't stack on top of one another. They work fine on a full window on a desktop. Would appreciate any suggestions that you may have or if you'd like to modify the sample code - that would be great!
.info-banner {
position: fixed;
width: 100%;
font-family: Arial, sans-serif;
font-size: 24px;
background: #000000;
color: #FFFFFF;
text-align: center;
bottom: 30px;
left: 0%;
opacity: 0.8;
}
.info-banner a {
color: #FFFFFF;
text-decoration: none;
}
.info-banner a:hover {
color: #aaa;
}
.footer-box {
position: fixed;
font-family: Arial, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 11px;
width: 100%;
opacity: 0.8;
z-index: 50;
bottom: 0px;
left: 0px;
}
.footer-box h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
text-align: center;
line-height: 30px;
font-weight: normal;
font-family: Arial, sans-serif;
color: #A9A9A9;
}
.footer-box a {
text-decoration: none;
outline: none;
color: #A9A9A9;
}
.footer-box a:hover {
text-decoration: underline;
}
<div id="contact-footer-merged">
<div id="contact-banner" class="info-banner">
<div>HEADER</div>
<div>SUB-HEADER</div>
<div>SUB-SUB-HEADER</div>
</div>
<div class="footer-box">
<h2>
LINK |
LINK |
LINK |
LINK |
LINK |
LINK |
LINK
</h2>
</div>
</div>
</div>

Answer 1

You have 'posititon:static' assigned to both '.footer-box' and ''#contact-banner'' elements. The '#contact-banner' element has a bottom position of 30px, so when the '.footer-box' list elements stack it increases the height of that element. Once the height of the '.footer-box' element is greater than 30px, it will overlap the '#contact-banner' element.
To solve this issue I have just remove position:static from both of those elements and added it to the '#contact-footer-merged' wrapper.
#contact-footer-merged {
position:fixed;
bottom:0;
left:0;
right:0;
width:100%;
}
.info-banner {
font-family: Arial, sans-serif;
font-size: 24px;
background: #000000;
color: #FFFFFF;
text-align: center;
opacity: 0.8;
}
.info-banner a {
color: #FFFFFF;
text-decoration: none;
}
.info-banner a:hover {
color: #aaa;
}
.footer-box {
font-family: Arial, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 11px;
opacity: 0.8;
z-index: 50;
}
.footer-box h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
text-align: center;
line-height: 30px;
font-weight: normal;
font-family: Arial, sans-serif;
color: #A9A9A9;
}
.footer-box a {
text-decoration: none;
outline: none;
color: #A9A9A9;
}
.footer-box a:hover {
text-decoration: underline;
}
<div id="contact-footer-merged">
<div id="contact-banner" class="info-banner">
<div>HEADER</div>
<div>SUB-HEADER</div>
<div>SUB-SUB-HEADER</div>
</div>
<div class="footer-box">
<h2>
LINK |
LINK |
LINK |
LINK |
LINK |
LINK |
LINK
</h2>
</div>
</div>
</div>