This is for my pet Bemorsting, the profile looks fine for me on firefox, the treasure is meant to mesh with the story box to look like one big long box.... but when I check on chrome there's a big gap between the bottom of the story and the top of the treasure chest. Is there a way to force the treasure to be right after the story on all screens and browsers without me having to manually set a top px ?

The way you currently have it, the answer is no. The story is absolutely positioned, so if you want the treasure to come after it, you will need to set a fixed height on the story and then absolutely position the treasure to have a top-offset of that much.

It's possible to rewrite your code in a way that makes it more responsive to different screens - it actually wouldn't be too hard for you because of the layout you are trying to have. But basically, you don't have any reason that the story or treasure need to be absolutely positioned. You can remove the absolute positioning from them, and use margin and padding to control the spacing around them. I can go into more detail if you'd like.

I was secretly hoping you'd be the one to reply here, you're always knowledgeable and helpful.

Yeah I'm bad and probably very old school when it comes to coding, I imagine a lot of the things I've done are basically held together with paperclips and rubberbands. Me coding is basically "I wonder what happens if I do this" with a lot of trial and error testing.

I've tried the second method and it seems to work a lot better on both browsers. One thing though, why does it seem like my z-index stopped working? Adding !important doesn't make it work either. I want the picture of the city to be behind the story but above the treasure, is that still doable?

This is a bit hard to explain but I'll do my best. Basically, z-index only works within a specific context. We call this a "stacking context". Certain things in the code will create a new "stacking context", and everything inside that context will have z-index relative to each other. So the elements inside one stacking context can be ordered with z-index relative to each other. But it won't affect how they are relative to an element that exists in a DIFFERENT stacking context. So even if you assign z-index 99999 to something, it might still stay behind other elements if it's not in the same stacking context.

On a webpage there are usually multiple stacking contexts. Positioned elements have their own stacking context, which is separate from elements that are not positioned. So the reason the z-index stopped working, is because you removed the position:absolute from the story and treasure, so those elements ended up in a different stacking context from your city image (which is positioned - it's fixed positioned).

Luckily, there is a way to position an element without changing where it would "naturally" be in the page flow, thus bringing it into the same stacking context without disrupting the actual position. This is "position:relative". Try adding just "position:relative" to your story and TC, but don't add any offset rules. When you use position:relative without offset rules, the element will end up behaving as it would if it were not positioned (that is - in accordance to the page flow) but it will have all the properties of positioned elements (that is - the stacking context, and various other useful things)

Thanks for explaining everything! I put the relative position in and it looks like it worked brilliantly! :D Thank you so much for helping me get this profile in working order on both browsers while still preserving the vision I had for it.