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).
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.
>Solution :
Your current code sets all of the positions correctly, but is still using the default position: relative which means the right nav will be positioned below the left nav (and off screen, since the left nav is 100vh)
Assuming you want your navs to be visible at any scroll position on the page, I would recommend using: position: fixed;
* {
background-color: #001005;
color: #00aa00;
font-family: consolas;
margin: 0px;
overflow: hidden;
padding: 0px;
position: relative;
}
.sideMenu {
position: fixed;
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;
}
#leftMenu {
left: 0vw;
top: 0vh;
}
#rightMenu {
left: 100vw;
top: 0vh;
transform: translate(-100%, 0%);
}<body>
<div class="sideMenu" id="leftMenu">
leftMenu
</div>
<div class="sideMenu" id="rightMenu">
rightMenu
</div>
</body>