Search code examples
htmlcsspositioning

CSS positioning: bottom of box right on top of box with hidden overflow

OK I have this in the HTML:

<div class="wrapper">
    <div class="help_box">some text</div>
    <div id="unique_title">Some Title<div class="help">?</div>
</div>

I also have a JS that when the mouse hovers over the "?", the "help_box" becomes visible. What I want is to put the very bottom of the "help_box" right on top of the "wrapper" div. I cannot write the "help_box" outside the wrapper. It must stay inside the "wrapper".

Here is the CSS for 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;
}

Some "help_box" es have different heights. So although the box goes on top and looks beautiful within one line, it overlaps inside the "wrapper" if it has 2+ lines. So in my CSS, the "top" declaration is controlling only the top of my "help_box" div. How can I control the BOTTOM of this div?

I tried instead of "top: -30px", I used: "bottom: +200px" but then the "wrapper" div is also varied in size.

Solution

  • Put the help_box inside the help class, and add position relative to the help class; then adjust the bottom attribute, and not the top:

    #help_box {
    position: absolute;
    padding: 6px 5px;
    bottom: 42px;
    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;
}

.help {
    position:relative;
}
.help:hover #help_box {
  display:block;   
}

#wrapper {
    top:100px;
    -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;
}

    See fiddle: http://jsfiddle.net/bozdoz/kgLNy/2/