Currently, I am faced with a challenge involving two divs: one positioned at the top (div1) and the other at the bottom (div2).
The goal is to ensure that div2 maintains a consistent distance of 400px below div1 while also aligning its left, bottom, and right sides perfectly with the browser window. Regardless of screen size, these three sides should always be in sync. How can this be achieved?
So far, my attempts have involved the following CSS code:
.background-oval {
background-color: #999;
border-top-left-radius: 100%100px;
border-top-right-radius: 100%100px;
bottom: 0;
height: 400px;
position: absolute;
width: 100%;
}