CSS - Overlapping DIVs

Hello All,

I am having trouble with some overlapping DIV elements on a new layout i’m working on. I believe the problem may have to do with positioning but i’m not quite sure and can’t seem to fix it.

I have an image slider (jquery) that is set to take up the full height of the browser page, and that’s working great. The problem is the content DIV i have below that (which is visible when scrolling) is overlapping a bit.

To see what i mean check it out here

When the page loads, use the nav arrows to change slides so it’s easier to see what i’m talking about. If you’re still not seeing it, resize the window (reduce width) and you’ll see the background color is overlapping with the content below.

What am i missing here? Is there a better way to have a full-page slider or is there a simple fix so that my content won’t overlap?

Thanks in advance for any help!

1 Like

Why don’t you just move the bottom row down a little bit so it’s not overlapping?

I guess I could use some media queries or something to make the margins line up correctly for different screen sizes but i was hoping someone here would find the route cause since i haven’t been able to yet.

In hopes someone else finds the fix useful, Sempervivum found the issue and explains it well.

Quote Originally Posted by Sempervivum View Post
The problem is that the container of the slideshow (.sliderContainer) is positioned absolute. To prevent it from covering the content below (.afterSlider) a margin-top is attached to this content. As the height of .sliderContainer is dynamic but the margin-top of .afterSlider is static, both values do not match when resizing the height of the viewport.

Remove “position:absolute” from .sliderContainer and change the height to “height:100vh”. Then remove “margin-top:750px” from .afterSlider.

Or simply make the margin-top of .afterSlider dynamic: “margin-top:100vh”.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.