jeditable field jumps out of div when the next container is floating to right

Question

I have two main divs #left and #right which are in another #content div, right next to each other. #left contains a jeditable field. #right is floating on right.

When the jeditable field is clicked, it jumps below the #content. You can try it here (click "kala"): http://jsfiddle.net/BuDLC/14/

If I remove the floating from #right, the field works as expected, ie. the input field appears on top of the editable div.

HTML:

<div id="content">
   <div id="right">
       right
   </div>
   <div id="left">
       <div class="edit">Kala</div>
    </div>
</div>

CSS:

body {
    background: gray;
    height: 100%;
}

.edit {
    border-bottom-style: dotted;
    border-bottom-color: lightgray;
    border-bottom-width: 1px;
    background: green;
}

.edit form,                                                                                                                        
.edit input {
    margin: inherit;
    padding: inherit;
    font: inherit;
    color: inherit;
    background: inherit;
    border: none;

}

#content {
    width: 300px;
    height: 100px;
}

#right {
   float: right;
   width: 100px;
   background-color: khaki;
}

#left {
     width: auto;
     min-width: 150px;
     background-color: blue;
}

#right, #left {
     height: 100%;   
}

Please MTV, pimp my HTML/CSS

Answer 1

I found it: I just needed to add

margin-right: 100px;

To #left. I struggled with this the whole yesterday evening and apparently I just needed to ask it here :D

Answer 2

Glad you found something that worked. If you're interested in the root cause of the problem it's because the input box was given a default width of 300px. Passing in a width of 150 to the editable extender fixes this:

$(".edit").editable("http://x.y.z/some/url", {width : 150} );

Editable width initialisation fiddle