I have a scenario where I had to resort to floats to accomplish a layout I need for my page. But, it makes the on page editing experience a problem. I have a form floated to the right of the page, and content that wraps around to the left. Both are editable properties that have blue boxes around them, but the edit box for the inline part shows over the floated section. It makes it so I cannot get to the floated section at all, which in itself an editble section. Is there something I can do to help the on page editing feature to honor the float so it does not cover the floated content? Are they any tweaks I can do to work around it?
I expect someone to suggest not to use floats, but after days of struggling to make this layout collapse correctly on mobile, this was where we ended up. None of the existing grid or flexbox layouts work for this scenario. This is the last hiccup in a long line of challenges we had to go thru to get this to work. Any help would be appreciated.
I wanted to add that I was able to work around the issue with string properties by applying the EditAttributes() call to a nested <span> element, which forced it to honor the float. But, I am not having any luck with XhtmlString properties. They have some extra stuff going on that is forcing the while section under the float, which is not ideal.