围绕浮动图像包装 contenteditable div 的 CSS 问题

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">&#8203;</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>