'Only one div of two sharing a class with different IDs showing up

I have a problem where I've got two divs that derive from the same class but with different IDs. Only the one that's defined in the HTML code first will show up (the following image is what the page looks like when leftMenu is created first).

Webpage when leftMenu is defined first

Here's the HTML code that places the divs:

<body>
    <div class = "sideMenu" id = "leftMenu">
        leftMenu
    </div>
    
    <div class = "sideMenu" id = "rightMenu">
        rightMenu
    </div>
</body>

I assume my problem is my lack of experience specifically with cascading stylesheets so I've included all the code in my .css file:

* {
    background-color: #001005;
    color: #00aa00;
    font-family: consolas;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
    position: relative;
} /* default attributes for all elements */

.sideMenu {
    background-color: #00200a;
    border: 2px solid #00aa00;
    border-bottom: 0px;
    border-top: 0px;
    min-width: 15vw;
    max-width: 20vw;
    overflow-y: visible;
    width: fit-content;
    height: 100vh;
}  /* shared attributes of side menus */

#leftMenu {
    left: 0vw;
    top: 0vh;
} /* attributes for the left menu */

#rightMenu {
    left: 100vw;
    top: 0vh;
    transform: translate(-100%, 0%);
} /* attributes for the right menu */

It looks like everything should be working fine, but it isn't. Sorry if this is really basic, it's been years since I touched HTML, CSS, or JS.

htmlcss


Solution 1:[1]

Adding position: fixed to my .sideMenu class fixed the issue (pun intended). I thought about how relative would work here and kinda confused things.

As I found this out, someone else has answered the question with this exact edit but with the code included, so they'll be getting the answer.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TheAngriestCrusader

Related Questions