Suggestions for consistent layout from frontend to backend

I have a layout that I am struggling to find a solution for.  The layout itself it simple, but the behavior due to how  editable blocks are generated in the backend is making things hard to truly give a WYSIWYG to the client.  Any advice on how I should go about this is welcome.

The site is not ready to launch so I am just going to attach a simple demonstration I mocked up in Photoshop.  I have two boxes that will contain information that will display on every page.  I currently have the html in the master page so that it will appear on every page that uses the template and the client does not need to worry about it.  I am floating these boxes right with a left margin to make room for a content block that will have the ability to wrap around these floated boxes should the content grow enough.  When looking at the site from the frontend it works as intended, but the backend is not able to render this the same unless I give the content block a width/max-width which then removes the ability for the content to wrap the floated boxes.

I guess I could make the floated boxes an html snippet or template where the client could add them to each content block, but that is defeating my purpose of keeping the client from having to even load this information.

Hello Stacey,

I suggest that you use layout widget to achieve the expected layout. See the attached image.

What I did:

1. I put new classes to the wrapping DIV of the layout widget and the two columns. 
2. Put the image in the first column and the text in the second.
3. Dropped CSS control and added the needed CSS (you can add it in your public theme)
   
   .textAndImage .image

   float: right;

   .textAndImage .text, .textAndImage .text .sf_colsIn, .textAndImage .text .sfContentBlock

   display: inline;
4. Preview the result

This will not look the same in Page Editor and in real website but you can add some "textAndImage" specific CSS to fix it in Page Editor.

Let us know if you need further help.

Greetings,
Katia
the Telerik team

Katia,

Thank you for the suggestion.  It seems I will end up with the same result though.  I did try what you illustrated and am seeing the same thing that my css is doing.  You mention that I could add some ".textAndImage" specific css to fix the view in the editor, but I am not sure how I can target just the editor view without also affecting what will render on the frontend.

Here is the code I currently have;

Just a note that ".right" is a global class that just floats right.  What I just posted and what I tried with your example both give me what we see in this new attached screenshot.

EDIT:  I just took a look at the source view in page edit and found that I can use .sfPageWrapper to get me closer to what I am looking for.   I can at least get it to sit nicely next to the floated boxes now, but it still does not truly wrap the floated element since I am now giving it a set width.  The frontend still looks as intended with this method.

Hi Stacey,

Unfortunately RadDock, which is used for widget drag-and-drop, uses tables for layout and it won't be possible to achieve the same layout in Page editor as in the public page.

However, we can make it look very much like the expected layout. The only difference will be that the text will not wrap around the image (see the attached image). Also, we need to know the width of the text block (.content-wrapper).

Best wishes,
Katia
the Telerik team