Question

I am making div with image and text. User can hover on this div to get dropdown.
I have issue on alignment of dropdown. I need it to be aligned with the right border of hovered div:

This is the code:

<div id="hoverDiv">
                <img alt="" width="32px" height="32px" src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211776868.png" />
                <a href="#">Hover Me!</a>
                <div class="showme">
                    <p>
                        Hidden Stuff!</p>
                </div>
            </div>

And CSS

#hoverDiv
        {
            width: 100px;
            height: 40px;
            float: right;
            margin-right: 5%;
        }
        #hoverDiv:hover
        {
            background: #ff0000;
        }
        #hoverDiv:hover .showme
        {
            display: inline;
            float: left;
            position: relative;
            margin-left: 5px;
            margin-right: 5px;
        }
        .showme
        {
            display: none;
            width: 100px;
            height: 200px;
            background: #0000ff;
            margin: 0px auto;
            float: left;
            left: -999em;
            padding: 10px 5px 0px 5px;
            border: 1px solid #777777;
            border-top: none;
            z-index: 10;
            position: absolute;
            left: auto;
            top: auto;

        }

Answer 1

In #hoverDiv, add position:relative

In #hoverDiv:hover div.showme:
Remove float:left (redundant)
Remove position:relative (redundant)
Remove margin-left:5px && margin-right:5px unless you prefer them

In div.showme:
Remove float:left (redundant)
Remove left:-999em (redundant)
Replace left:auto with right:0

This jsFiddle has all the work done for you.