CSS Issue in wrapping contenteditable div around Floating image - html

Question

I have a problem in floating a contenteditable div around a image. Here's my code:
HTML:
Section title
CSS:
.fl {
float: left;
}
.rgtDiv {
min-height: 300px;
border: solid 1px #ccc;
}
I want the rgtDiv to have left border at the right end of the image but right now it appears at the left end of the image.
When I click on the rgtDiv the cursor goes to the image and not inside the rgtDiv. How to make the cursor come inside the rgtDiv?
Also the border of the rgtDiv applies to the entire parent Div. How to make it to apply only for the rgtDiv.
Can anyone help resolving my problem?
Here's my jsfiddle link: http://jsfiddle.net/n8WJ2/
Thanks in advance!
yadav

Answer 1

try giving the rgtDiv a float: left; and a width ...
should work and don´t forget to clear your floats

Answer 2

You can add this:
.rgtDiv {
position: relative;
overflow:hidden;
min-height: 300px;
border: solid 1px #ccc;
}
Demo
It will resize depending of the width of the image.

Answer 3

Try this
HTML
<div>
<div class="section-title">Section title</div>
<div class="rgtDiv">
<img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300"/>
<div contenteditable="true" class="editableblock"></div>
</div>
CSS
.fl, .rgtDiv img {
float: left;
}
.rgtDiv {
border: solid 1px #ccc;
display:block;
}
.editableblock {
min-height: 300px;
}

Answer 4

If anyone still cares.
To workaround the issue with caret position, you can add zero-width space to the div in HTML:
<div contenteditable="true" class="rgtDiv">​</div>
and restore it every time user clears it:
$('.rgtDiv').keyup(function(){
if($(this).text().length == 0){
$(this).text('\u200B');
}
});
Demo

Answer 5

overflow: hidden can be used for the contenteditable block :empty pseudo-class.
Please note that it has to be really empty: no spaces or tabs inside, just <div contenteditable="true"></div>