Question

I madec a widget: mousedown on a hilited word, a menu pops out. drag to your choice, release. menu unpops.

The widget functions properly, but click/drag makes the widgeted elements change size and move around which is not the desired behaviour. The css is really pretty simple, so I’ve no idea where to start.

here’s the fiddle. http://jsfiddle.net/monsto/JfWQ3/1/

here’s the css

body {margin:25px;}
li {cursor: pointer; display: inline-block; border:1px solid black; position:relative;height:20px;}
.del {display: none;background-color: red; width:50%; float:left;text-align:center;position:relative;}
.save {display: none;background-color: green;width:50%; float:right;text-align:center;position:relative;}
.word {display: inline-block;}​

and some html

<div id="taglist">
    <br /><hr />
        Quisque ut felis urna, eget rutrum odio. Proin sed augue at 
            <li>
                    <span class="word">enim consectetur</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
        Ut interdum erat at neque egestas sagittis sed non massa. Nullam nec nulla quis purus convallis venenatis. Vivamus a pulvinar mauris. Quisque suscipit augue a felis suscipit ornare.
            <li>
                    <span class="word">euismod.</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
        Aliquam eget quam sit amet lacus commodo malesuada.            
            <li>
                    <span class="word">Etiam</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
        Ut interdum erat
            <li>
                    <span class="word">eget</span>
                    <div class="del">+</div>
                    <div class="save">-</div>
            </li>
     leo in turpis congue porta vel non nisl. Mauris ipsum erat, pellentesque at ullamcorper at, egestas ac enim. Aliquam fringilla mollis porttitor. In tempor pretium gravida.
    <hr /><br />
</div>

Answer 1

I think the problem is that the browser is allocating a small amount of space for the two floating divs. I was able to fix the problem (in Firefox at least) by using absolute positioning instead of floating:

.del {
    display: none;
    background-color: red;
    width:50%;
    text-align:center;
    position: absolute;
    left: 0;
    top: 20px;
}
.save {
    display: none;
    background-color: green;
    width:50%;
    text-align:center;
    position: absolute;
    right: 0;
    top: 20px;
}