I'm facing a bit of a puzzle here. I have a div that spans the full height of the browser, with a background set to 100% size and image content contained in two inline divs that are vertically aligned in the middle.
In one of these divs, the image is actually larger than the viewport (which is necessary for my design). Therefore, I've applied overflow: hidden to the containing div to hide any parts of the image that extend beyond the viewport's height of 100%.
It might be a bit hard to explain just through words, so I've created a CodePen showcasing the issue:
https://codepen.io/deelite310/pen/bjvKPG
The challenges I'm encountering include:
1) The content in the right div is causing the left div to align vertically based on the full height of the image rather than the actual height of the container, leading to the left div disappearing within the overflow: hidden area;
2) When resizing the browser window (for example, from 1680x600), the main section's content gets covered by the footer region (resulting in images disappearing or being obscured, and the background not resizing properly).
So, my questions are:
1) How can I adjust the divs and their content to ensure that the main section remains fully visible without being obstructed by the footer when the browser dimensions differ from standard viewport settings?
2) Is there a way to display all content in both divs within the main section, even if one side contains content that extends beyond the viewport and is hidden due to overflow: hidden?
You can find some snippets of my CSS below, or check out the complete code at the CodePen link provided above:
section {
width: 100%;
min-height: 100%;
display: table;
height: inherit;
margin: 0;
padding: 0;
background: url("https://placeimg.com/1000/400/tech/sepia") no-repeat center top;
background-size: 100%;
}
#hero #col {display: inline-block; width: 50%; verticle-align: middle;}
#hero #col:nth-child(1) img {width: 65%; height: auto;}
.place {margin-bottom: 20%;}
#footer {width: 100%; height: 400px; text-align: center; border-top: 1px solid #000}
#footer p {font-weight: bold; font-size: 32px; margin-top: 3%;}