I searched to see if I can find a solution in the forum, but although I found similar issues, the solutions offered in those posts were not relevant to my situation. So I am hoping I can get some assistance.
I am working on a site which has a fixed navigation bar. Under the navbar is a section (2nd Section) with stacked DIVs (images). Later, the stacked images will be animated, which is why I need them as separate elements. Below that section is another section (3rd Section), that contains flex elements for info and a code block for a twitter feed.
The problem I am experiencing has to do with the 3rd section not lining up under the 2nd Section. It is instead aligning to the top of the page.
What I have done:
- Since I need to stack images in the 2nd Section, the position for that section is set to “relative”. All the images in that section that need to be stacked have their position set to “absolute”, to keep them aligned where I need them.
- Since the navigation bar is fixed, when I add the 2nd Section it positions itself to the top of the page. So I added some margin to the top of the 2nd Section that is equal to the navigation bars height, to force it down and line it up with the bottom of the navbar and get rid of the overlap. That seems to have solved the issue and seems to be the advice I saw in other forum posts.
- When I add the 3rd Section, it too positions itself to the top of the page as well. In an attempt to resolve this issue, without adding hundreds of pixels to the top-margin, I have tried setting different position alignments for that section in hopes it will bring it down and align it with the bottom of the 2nd Section. Unfortunately, none of my attempts have yielded any positive results.
I assume that a possible solution would be to replicate what I did with the 2nd Section, which would be to add a crazy amount of top-margin on the 3rd section to force it down below the 2nd Section. But for some reason, I feel like doing that might not be the correct or best way to position the 3rd Section.
Is there a better way to line them up without adding several hundred pixels of margin on the top of the 3rd Section?
Here is my site Read-Only LINK