selection bug with widgets

[Dexter Media]

Hi,

I'm struggling with a strange bug with the image2 (​http://ckeditor.com/addon/image2, version 4.4.4) plugin. If I insert two widgets with a caption and align the first one left and leave the align of the last one none, the first widgets becomes unselectable.

The problem was reproducible on the demo side ​http://ckeditor.com/demo#widgets

This code should reproduce the problem:

<figure class="image" style="float:left"><img alt="Apollo-CSM-LM" src="http://c.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>Apollo CMS-LM spacecraft</figcaption>
</figure>

<figure class="image"><img alt="Apollo-CSM-LM" src="http://c.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>Apollo CMS-LM spacecraft</figcaption>
</figure>

If you inspect the selection wrapper of the widget with none align, it covers the first widget (​http://imgur.com/veQbbwE). Could be a problem with the css float?

I tested it in Chrome (latest) and Firefox (latest) on a Mac (Version 10.8.5)

Thank you for your help!

[Jakub Ś]

After some discussion we have decided to confirm this ticket.

To work around this you can insert something like below between two widgets or make two widgets float:left and insert below div behind them.

<div style="clear:left;height:0;font-size:0px;"></div>

[Piotrek Koszuliński]

This is a valid issue. When the first widget is floated, the second overlaps it. That's unfortunately how CSS works. Perhaps we can improve styling of the widget wrappers, but we didn't find yet a good option.

First thing that could work is overflow:hidden, but then the drag handle is cut in half. Second option could be to add clear:both, but that would prevent floating one image next to another. So unfortunately it looks that there's no option in CSS right now and we have to wait for some new features.

If anyone have any idea, we would gladly check it. Maybe some display:table?

[Piotrek Koszuliński]

I see that display: inline-box, inline-table, inline-flex, flex and table work great on Blink. We could check which of these is widely supported.