After lurking on this website for several months and finding valuable information through searches, I've decided to make my first post. Please forgive me if I'm not following the proper protocol. :) I've encountered an issue for which I can't seem to find a solution.
My project involves creating a centered, 2-column, single-page website. The left column serves as navigation and is fixed, while the right column (content) should scroll and expand vertically with added content. I've attempted to add a drop shadow around both columns that should also expand vertically with the content, but it seems to only go as far as the bottom of the screen. By placing a red border around the content div, I noticed that the shadow stops tiling at the bottom of the content div, indicating that the content div itself is not expanding. I've set the height of that div to 100%.
I'm unsure if the issue lies with the height settings or perhaps the positioning I've applied. I've searched through the forums and found suggestions to set the body and/or html height to 100%, which I have done. The shadow belongs to the wrapper div (also set to 100%). Despite these adjustments, the problem persists.
At this juncture, I'm stumped. It's likely a simple fix, but it eludes me at the moment. I considered including the code here, but I didn't want to clutter the post with irrelevant information. Simultaneously, I'm uncertain which parts of the code are pertinent. To provide more context, here's a link to the page where the HTML and CSS can be examined: . If it's preferable to display the code here, kindly inform me, and I'll gladly add it.
Would anyone be able to identify what I'm overlooking?