css - Creating a specific HTML layout -

I need to create a specific layout in HTML.

Here's how

The colors are for demo purposes only, I want to create an editable area that starts inline with non-editable text and continues in the next line under non-editable text.

This is a requirement for creating templates in which the user will directly remove the text. / P>

General divisions and sections did not help me here, can someone give me some hints?

I have followed the following things,

• A

  This is a dynamically designed layout, so I CSS can not keep dimensions ready before hand

  If you can use images for uneditable text, then you can use the image By doing the background and working on it:

    body {font-family: 'verdana'; Font size: 10pt;}. Editable (background: url ('http://i.imgur.com/cAZvApm.png') -1px 1px no-repeat; text indent: 8.5 m; margin: 0 10px;}  

    
   gt; & lt; / script & gt; & lt; script & gt; if (document.body .createTextRange) {var Category = document.body.createTextRange (); range.moveToElementText (document.querySelectorAll ("editable.") [0]); range.select ();} and if (window.getSelection) {var Selection = window.getSelection (); Var range = document.createRange (); Range.selectNodeContents (document.querySelectorAll ("Editable.") [0]); Selection.removeAllRanges (); Selection.addRange (range); } Document.querySelectorAll ("Editable") [0]. Focus (); & Lt; / Script & gt;  

  Preview: