There seems to be an issue with the content boxes on one of my pages. They all use the same CSS, but for some reason, there is a scroll bar in one of the content boxes and the footer doesn't align properly.
The problem arises when I add overflow:auto to the CSS. If I remove it, the content box disappears completely while the content remains.
I'm puzzled by this since all pages share the same CSS and the other pages are working fine.
Here's the CSS for the main content box:
#contentProducts {
background: rgba(255, 255, 255, 0.6);
width: 80%;
min-height: 100%;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
box-shadow: 4px 4px 10px black;
}
The content on the page consists of 4 boxes with images. The CSS for those is:
#clothingProduct {
padding-top: 40px;
position: relative;
background-position: center;
background-size: cover;
text-align: center;
float: right;
width: 300px;
height: 140px;
margin-right: 12%;
margin-top: 60px;
margin-bottom: 30px;
}
This is the CSS for the footer:
#footer {
float: left;
bottom: 0;
position: static;
background: rgba(255, 255, 255, 0.6);
width: 100%;
height: 20px;
color: black;
margin: auto;
overflow: hidden;
}
On normal pages, it should look like this, but on the product page, it looks different.
I have tried a temporary fix by setting the height of the box in pixels, but the footer still doesn't sit in the correct place.
If you need more information, please let me know. Any help would be greatly appreciated.