The problem
Let’s say we’ve created a content area and added three floating blocks to it. When rendered they look something like this:
When we enter edit mode, EPiServer adds an overlay around the content area. EPiServer tries to figure out the size and positioning of the overlay based on the child elements, more specifically the content area container.
However, in this particular case, the CSS for the content area container and the blocks makes it so that the height of the container cannot be determined.
This results in an edit overlay which does not wrap the content area:
What we want is something like this, where the edit overlay wraps the entire content area:
The solution
To achieve this we add a tiny CSS class to circumvent the problem:
.overflow-hidden { overflow:hidden !important }
Now we want to apply this CSS class in edit mode only. We do this by setting an EditContainerClass attribute when rendering our content area:
@Html.PropertyFor(model => model.MyContentArea, new { EditContainerClass = "overflow-hidden" })
This CSS class will only be applied in edit mode, and if we examine the edit mode markup closely we’ll see it in action:
Disclaimer
There are probably neater and sweeter ways of doing this, but this got the job done! :)