Alright, here's what I have in my HTML:
<div class="wrapper">
<div class="help_box">some text</div>
<div id="unique_title">Some Title<div class="help">?</div>
</div>
I've got a JS setup that makes the "help_box" visible when hovering over the "?". My goal is to position the very bottom of the "help_box" right on top of the "wrapper" div. One restriction is that the "help_box" must remain inside the "wrapper".
Below you'll find the CSS for both the "wrapper" and the "help_box":
.help_box {
position: absolute;
padding: 6px 5px;
top: -30px;
display: none;
right: 5px;
border-radius: 5px;
color: rgb(51, 34, 170);
border: 1px solid rgb(15, 27, 160);
background-color: rgb(255, 255, 255);
font-size: 12px;
vertical-align: bottom;
}
.wrapper {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-color: #F9F9F9;
border: 1px solid #D6D6D6;
border-radius: 6px;
font-size: 15px;
margin: 0 0 20px;
padding: 5px;
float: none !important;
width: auto !important;
text-align: justify;
position: relative;
}
Since some "help_box" elements may vary in height, positioning them perfectly within one line might cause overlap inside the "wrapper" if they span multiple lines. Currently, the "top" declaration in my CSS only controls the top of the "help_box" div. How can I manage the BOTTOM of this div?
I experimented with using "bottom: +200px" instead of "top: -30px", but that caused the "wrapper" div to adjust its size as well.