I'm trying to design an html/css document showing a list of items in one div with content in a separate div to the right of that list. Each list item includes a hidden description that can be revealed, for example, when a user hovers over a certain "more info" box. However, I want that hidden description to be displayed vertically adjacent to its item in the list and to the right of the list div (thus floating above the content to the right of the list div).
To clarify my intent, I've created the following example. Each item in the list has a div styled to show a hidden information box when the cursor hovers over the div. However, the default placement of the information box is not where I want it (see note in the demo), and even if it were, it doesn't follow its item when scrolled.
I know I can set a parent of the floating-more-info-box div to "display: relative" to control the position of the floating-more-info-box div, but then it will be positioned within the content of it's parent and not float on top of the adjacent gray content.
<style>
.empty-but-cannot-get-code-snipit-to-work-without-this {
}
.outer-container {
display: flex;
flex-direction: row;
}
.list-column {
width: 11rem;
height: 10rem;
background-color: white;
overflow: auto;
position: relaive;
border: 3px solid green;
}
.placeholder {
height: 10rem;
}
.placeholder.left {
width: 5rem;
background-color: palegoldenrod;
border: 3px solid goldenrod;
}
.placeholder.right {
width: 20rem;
background-color: gray;
border: 3px solid darkslategray;
}
.item {
height: auto;
padding: 0.4rem;
border-width: 1px 0 1px 0;
border-color: green;
border-style: solid;
}
.hover-activator {
border-radius: 2rem;
border: 2px solid ;
padding: 0 0.5rem 0 0.5rem;
width: fit-content;
cursor: pointer;
}
.floating-more-info-box {
display: none;
position: absolute;
background-color: yellow;
padding: 0.5rem;
}
.item:hover .floating-more-info-box {
display: flex;
}
</style><div class="outer-container">
<div class="placeholder left"></div>
<div class="list-column">
<div class="item">
<label>name: Item 1</label>
<div class="hover-activator">
Hover for more info
<div class="floating-more-info-box">
I want this aligned vertically with Item 1 but hovering to its right (floating on top of the gray placeholder) even when scrolled
</div>
</div>
</div>
<div class="item">
<label>name: Item 2</label>
<div class="hover-activator">
Hover for more info
<div class="floating-more-info-box">
I want this aligned vertically with Item 2 but hovering to its right (floating on top of the gray placeholder) even when scrolled
</div>
</div>
</div>
<div class="item">
<label>name: Item 3</label>
<div class="hover-activator">
Hover for more info
<div class="floating-more-info-box">
I want this aligned vertically with Item 3 but hovering to its right (floating on top of the gray placeholder) even when scrolled
</div>
</div>
</div>
<div class="item">
<label>name: Item 4</label>
<div class="hover-activator">
Hover for more info
<div class="floating-more-info-box">
I want this aligned vertically with Item 4 but hovering to its right (floating on top of the gray placeholder) even when scrolled
</div>
</div>
</div>
<div class="item">
<label>name: Item 5</label>
<div class="hover-activator">
Hover for more info
<div class="floating-more-info-box">
I want this aligned vertically with Item 5 but hovering to its right (floating on top of the gray placeholder) even when scrolled
</div>
</div>
</div>
</div>
<div class="placeholder right"></div>
</div>Is there a pure html/css solution to this problem or will I have to resort to scripting?