I'm currently facing a dilemma while working on a webpage, and I could use some assistance.
If you check out this JSFiddle link, you'll get an idea of how my design functions. I have a div table with another table as an overlay on top, creating the illusion of the div floating above the content. This effect is achieved through absolute positioning, which works well. However, I strive to ensure that the design looks good even when scaled down for smaller screens, with a minimum width of 640px.
Looking at the JSFiddle example, you can see the desired outcome. Apart from minor adjustments like font and color choices, it should look as intended. Now, if you alter the .content div to:
.content {
max-width:640px;
}
This change should make the box smaller, simulating a smaller screen or window size. However, you'll notice that the absolute position overlay doesn't scale proportionally and appears slightly short.
I've experimented with various settings like max-height and min-height without success. Therefore, I'm seeking guidance on how to make the overlay adjust along with the rest of the elements.
I hope I've explained my issue clearly enough. Thank you in advance for your assistance.