Having an issue with two divs that share the same class but have different IDs. Only the one defined first in the HTML code is visible (see screenshot below showing when leftMenu is created first).
https://i.sstatic.net/5Znvg.png
Below is the HTML layout of the divs:
<body>
<div class = "sideMenu" id = "leftMenu">
leftMenu
</div>
<div class = "sideMenu" id = "rightMenu">
rightMenu
</div>
</body>
It seems like my problem may be due to my limited knowledge of cascading stylesheets, so I've included all the relevant code from my .css file:
* {
background-color: #001005;
color: #00aa00;
font-family: consolas;
margin: 0px;
overflow: hidden;
padding: 0px;
position: relative;
} /* default styling for 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 styling for side menus */
#leftMenu {
left: 0vw;
top: 0vh;
} /* styling for the left menu */
#rightMenu {
left: 100vw;
top: 0vh;
transform: translate(-100%, 0%);
} /* styling for the right menu */
Everything appears to be set up correctly, but there's still an issue. Apologies if this is too basic, as it's been quite some time since I worked with HTML, CSS, or JS.